[CSS]如何使用伪元素,例如之前和之后

“伪元素很难相处”
“用CSS编写伪元素可以表示什么不是很好吗?”

您是否有“伪元素”这样的图像?尤其是,即使可以使用CSS实现图标显示,为什么图标显示仍是伪元素的问题对于那些刚开始学习CSS的人来说却是幼稚的。这次,我将向有这个问题的人详细解释“什么是伪元素”。伪元素对于HTML元素非常有意义,并且是您肯定要使用的用法之一。阅读本文后,我将对其进行解释,好像我应该使用它一段时间。

本文适用于“伪元素”新手或知道但不知道如何使用它们的初学者。如果您已经知道,则可以跳过它。

[对于初学者]仔细解释如何编写CSS(样式表)

如何使用伪元素

使用伪元素的示例

伪元素是“类元素”,而不是严格意义上的元素。它用于显示无法在HTML上指定的项目。我认为您无法理解图像,因此让我们看一下使用伪元素实际制作的设计。

例如,您见过以下设计吗?

在此,使用“伪元素”显示字符左侧的图标。例如,如果您有许多这样的按钮并且想要类似的设计,您是否多次用HTML编写图标显示代码?这延长了代码长度并且效率低下。如果要一次指定所有内容,则使用伪元素会更方便。

伪元素点

伪元素的要点如下。

  • 标记名称,类名称,ID名称等之后。:: 之前和之后我会穿上。这使您可以在元素之前或之后添加另一个元素。
  • 如果设置了伪元素,则将其与content属性一起使用。一起内容:“”;要指定。
  • 在CSS3中,伪元素冒号是我要写
  • 一个选择器的伪元素只有一个可以指定。

CSS3中的两个冒号

您可能会发现Google上的某些解释有一个和两个冒号。这两种表示法都是正确的,但是从CSS3开始,有两个冒号将它们与伪类区分开。对于支持CSS3的浏览器,请使用两个冒号。它具有类似于称为伪类的伪元素的表示法,并且用“ 2”来区分它。
单击此处以获取伪类的描述

伪元素的类型

顺便提及,由于这两个元素被频繁使用,因此许多人在将它们称为伪元素时会想到这两个元素,但是伪元素的类型不限于“之前”和“之后”。我还将谈谈其他因素。

伪元素的类型 描述
::之前 即使元素之前没有HTML的描述,例如图标,图像,字符等,也可以显示元素。
::之后 在元素之后,即使未用HTML描述,例如图标,图像,字符等,也可以显示该元素。
:: 第一行 您可以在段落的第一行中指定它。
::首字母 您可以将其指定为段落开头的第一个字符。

稍后将解释“之前”和“之后”,因此在这里我们将解释“第一行”和“第一字母”。

第一行

“第一行”是仅在第一行上起作用的伪元素。您可以执行以下操作:

<p>first-lineは、段落の最初の行に対して指示を出せる擬似要素です。使う機会は少ないかもしれませんが覚えておくと便利です。</p>
p{
	width: 300px;
}

p::first-line{
 color: #e6b422;
 font-size: 25px;
}

它将显示如下。更改宽度只会更改浏览器的第一行。

首字母

“第一行”是仅在第一行上起作用的伪元素。您可以执行以下操作:

<p>first-letterは、段落の最初の行に対して指示を出せる擬似要素です。使う機会は少ないかもしれませんが覚えておくと便利です。</p>
p{
	width: 300px;
}

p::first-letter{
	font-size: 40px;
	color: #e6b422;
}

它将显示如下。更改宽度只会更改浏览器的第一行。

使用伪元素的原因

值得

好吧,到目前为止,我已经解释了,但是您不认为:“是否可以用HTML编写所有代码?伪元素的优点是什么?”在这里,我将解释一些关于伪元素的重要性。伪元素有两个主要含义。

      (1)HTML结构紧凑。
      (2)它导致对SEO关键字的重视。

①但是,例如,假设您在伪元素中放置了字符,图标或图像,但是如果您以HTML编写它。即使该描述在结构上没有意义,HTML也会膨胀。但是,通过使用伪元素,伪元素显示的设计将不受Google搜索的约束。在这方面,它的意思是“类元素=伪元素”。这意味着即使您更改设计,HTML的结构也不会更改。换句话说,您可以通过省略原本会在HTML上的代码并将其移至CSS伪元素来保持结构紧凑。

接下来,关于(2),通过使描述最小化来突出关键词。换句话说,假设您使用没有伪元素的HTML设计。信息有1000条,其中关键字是100个,并且有伪元素,当信息量被抑制到800个时,当800条信息中有100个关键字时,关键字就很明显。 ..换句话说,关键字不被隐藏在大量信息中,搜索引擎可以轻松识别它们。

这样,即使在显示屏上增加了设计元素的数量,伪元素也具有使Google的搜索引擎正确识别结构的效果。

缺点

另一方面,请注意,伪元素是不可能的。例如,假设您要使用伪元素显示图像。并假设您要调整该图像的大小。但是,它显示为伪元素,并且图像的大小无法更改。同样,您不能在使用“标签”显示的图像或文本上放置链接。

如何使用伪元素

让我们学习如何具体使用它。这是五个例子。

①显示
②释放浮子
③图标显示
④图像显示
⑤井喷

显示

让我们进行以下显示。

<div class="sample">
  <a href="#">新商品が入荷しました。</a>
</div>
.sample a{
	display: block;
	font-size: 20px;
	text-decoration: none;
}

.sample a::before{
	content: "新着";
	border: 1px solid red;
	background-color: red;
	font-size: 18px;
	color: #fff;
	padding: 2px;
	margin-right: 3px;
}

除此之外,您可以编写“必填”显示和一则小消息。
*如果您确实要显示“新到货”,则必须设置一个程序,使其在一定时间内显示出来。

释放浮动

释放浮动时,div class =”clearfix”我认为有些人使用,例如,但是如果将其放入HTML中,则代码只会增加,因此可以将其作为伪元素来减少代码的数量。用法如下。

<div class="sample">
  <div class="content-section">
     <h3>Sample1</h3>
     <img src="img/sample_img_1.JPG" width="300" alt="">
  </div>
  <div class="content-section">
     <h3>Sample2</h3>
     <img src="img/sample_img_1.JPG" width="300" alt="">
  </div>
</div>
.content-section{
	width: 310px;
	float: left;
}

.sample::after{
	content: "";
	clear: both;
}

图标显示

这次,在图标显示中,“字体很棒“使用。请注意如何使用从页面复制下面的代码,并将其粘贴到“ head”中。否则,将不会显示该图标。

设置代码如下。

<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="//use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
</head>
<p>これはサンプルです。</p>
p {
position: relative;
padding: 15px;
font-size: 24px;
line-height: 1.4;
color: #fff;
background: #e9546b;
border-radius: 5px;
box-shadow: 5px 5px 5px #e5e4e6;
text-align: center;
width: 35%;
}

p::before{
font-family: "Font Awesome 5 Free";
content: "\f0e0";
position: absolute;
left: 15px;
font-size: 24px;
color: #fff;
}

显示图标时要注意的要点是如何在“字体家族”中指定“ Font Awesome 5 Free”以及如何编写称为Unicode的图标代码。请注意,代码特别是在编写Unicode时放在“ \”之后。Unicode页面

图像显示

可以使用伪元素显示图像,但有一些警告。

假设您在content属性中设置图像路径,如下所示。

<div class="gazou">擬似要素で画像を表示させます。</div>
.gazou::before{
  content: url(./img/sample_img_1.JPG);
  display: inline-block;
  width: 50px;
  height: 50px;
}

结果是宽度和高度不起作用。

因此,通过设置背景图像属性来显示图像。请写如下。关键是将content属性保留为空。

.gazou::before{
  content: '';
  display: inline-block;
  background-image: url(img/sample_img_1.JPG); =>ここに画像のパスを書く。
  width: 100px;
  height: 70px;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

然后,可以缩小或放大图像。

吹熄

气球的设计也可以由伪元素制成。

<p>これはサンプルです。</p>
.fukidashi{
  display: inline-block; 
  position: relative;
  padding: 30px;
  background-color: red;
}

.fukidashi::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 30px;
  bottom: -15px;
  border-top: 15px solid red;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

概要

我将总结到目前为止我已经告诉您的内容。

  • 伪元素允许您修改和添加设计,同时保持HTML结构紧凑。
  • 使用伪元素还具有使页面关键字脱颖而出的效果。 (但是,影响不大)
  • 伪元素在选择器之后写两个冒号,例如“ :: before”和“ :: after”(对于CSS3)。
  • 它可以用于各种目的,但通常用于添加标题设计或显示图标。

撰写本文的人

田中 陽介

我在越南开展业务,并且从事与人事相关的咨询业务。我离开日本已经八年了,我享受着日本不可能发生的事情。最近,我正在使用Ruby on Rails进行Web服务。