ATOZ CSS屏幕截图：CSS伪元素

核心要点

• CSS伪元素是页面上并非HTML代码中存在的元素，它们可以使用任何应用于其他元素的CSS样式进行操作。
• CSS中的:before和:after伪元素可用于生成页面内容，包括文本、图像、属性值和计数器。它们还可用于创建具有最少标记的复杂形状。
• CSS中的各种伪元素包括:first-line、:first-letter、:selection、:before和:after。这些可用于设置元素特定部分的样式，在元素内容前后插入内容，以及设置块级元素的首字母或首行样式等等。

视频讲解 (加载播放器中……) 本视频是AtoZ CSS系列的一部分。您可以在此处找到该系列的其他内容。

文字记录

CSS伪元素是页面上不在HTML代码中出现的元素。

它们可以使用应用于任何其他元素的任何CSS样式进行操作。

两个特殊的伪元素——:before和:after——可用于从CSS生成页面内容，并具有许多潜在的用例。

在本节中，我们将学习：

• 五种不同的伪元素
• 从CSS生成文本、图像属性值和计数器等内容
• 如何使用最少的标记创建复杂的形状

伪元素

CSS中有五个伪元素：

• :first-line
• :first-letter
• :selection
• :before
• :after

这些与伪类通过双冒号区分，但为了简洁起见，通常在CSS中使用单冒号编写。

这里有一段很长的占位符文本块引用。我可以使用:first-line更改文本首行的颜色，即使文本重新调整格式后也适用。我可以通过使用浮动和更大的字体大小设置:first-letter的样式来创建一个首字母大写效果。我还可以使用:selection更改所选文本的颜色。

我可以使用:before和:after伪元素在块引用前后添加大引号。文本从content属性生成，然后可以使用CSS样式来获得所需的效果。

<code class="language-css">blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}</code>

生成内容

使用:before和:after伪元素允许我们向页面添加各种不同的内容。

我们已经看到如何向页面添加文本内容，但我们也可以添加图像、属性值、计数器或空字符串，只需访问这两个额外的元素即可。

添加图像类似于使用url()添加背景图像。在这里，使用url()作为content属性的值。我实际上更喜欢使用背景图像，并通过为content创建空字符串来访问伪元素。这提供了对图像的更多控制，因为所有常用的属性（如background-position、background-repeat和background-size）都可用。

<code class="language-css">blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}</code>

也可以使用content属性将HTML属性的值注入页面。在创建打印样式表时，我喜欢添加以下代码片段以输出链接的URL，以便可以从页面读取它们：

<code class="language-css">li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}</code>

这将为任何不是内部链接或哈希链接的链接在链接文本后添加链接。

生成内容的最后一个特例是插入计数器变量的值。我过去发现这对于对复杂的法律条款和条件列表进行编号非常有用。

这里有一系列标题，下面有一系列嵌套列表。我希望每个章节标题都有一个编号，每个列表项都作为每个章节的子项编号。

对于每个h2，我将递增一个“section”计数器；对于每个列表项，我将递增一个“item”计数器。在每个章节标题之前，我将输出章节计数器的值；在每个列表项之前，我将输出项目计数器的值。可以在计数器之间添加额外的字符串以创建复杂的编号系统。此方法的简化形式可用于控制列表中数字或项目符号的样式。

<code class="language-css">a[href]:not([href*="#"]):after {
  content: attr(href);
}</code>

形状

由于页面上的每个元素都可以有两个“额外”元素，并且可以根据我们的喜好设置样式，因此可以创建各种复杂的形状。

在思考演示示例时，我看到了CSS-Tricks上形状的参考；其中一个非常突出，我将逐步介绍其工作原理。让我们用单个元素制作阴阳符号。

<code class="language-css">h2 {counter-increment: section;}
ul {counter-reset: item;}
li {counter-increment: item;}

h2:before {
  content: counter(section) " - ";
}
li:before {
  content: counter(section) "." counter(item);
}</code>

从方框开始，可以使用border-radius将其转换为圆形。可以使用等于圆形高度的border-bottom创建两个彩色半圆形。两个点是通过创建两个带有伪元素的圆圈并使用position:absolute放置它们来创建的。使用与半圆颜色匹配的边框，可以创建符号的两个圆形端点。如果您问我，这很酷。

我很喜欢使用伪元素；您可以用它们做很多事情，并向页面添加各种视觉效果，而不会使标记混乱。

关于CSS伪元素的常见问题

CSS伪元素有哪些不同类型？

CSS伪元素用于设置元素特定部分的样式。有几种类型的伪元素，包括::before、::after、::first-letter、::first-line、::selection、::backdrop和::placeholder。每个伪元素都针对元素的不同部分。例如，::before和::after用于在元素内容前后插入内容，而::first-letter和::first-line用于设置块级元素的首字母或首行的样式。

如何使用::before和::after伪元素？

::before和::after伪元素用于在元素内容前后插入内容。它们通常用于装饰目的，例如添加图标或引号。要使用这些伪元素，需要指定content属性。例如，要在段落前面添加心形图标，可以使用以下代码：

<code class="language-css">blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}</code>

我可以使用伪元素设置表单输入的样式吗？

是的，您可以使用伪元素设置表单输入的样式。但是，并非所有表单输入都可以使用伪元素设置样式。例如，::placeholder伪元素可用于设置输入字段的占位符文本样式。这是一个示例：

<code class="language-css">li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}</code>

如何使用伪元素设置段落首字母的样式？

您可以使用::first-letter伪元素设置块级元素首字母的样式。这通常用于创建首字母大写效果。这是一个示例：

<code class="language-css">a[href]:not([href*="#"]):after {
  content: attr(href);
}</code>

我可以在同一个元素上使用多个伪元素吗？

是的，您可以在同一个元素上使用多个伪元素。例如，您可以在同一个元素上同时使用::before和::after来在其内容前后插入内容。但是，请记住伪元素的顺序很重要。::before伪元素将始终插入在::after伪元素之前。

所有浏览器都支持伪元素吗？

大多数现代浏览器都支持伪元素。但是，某些浏览器的旧版本可能不支持所有伪元素。在使用伪元素之前，最好检查一下浏览器的兼容性。

伪元素和伪类有什么区别？

伪元素和伪类都用于根据某些条件为元素应用样式。但是，它们用于不同的目的。伪类用于在元素处于特定状态时设置其样式，例如当鼠标悬停在其上或获得焦点时。另一方面，伪元素用于设置元素特定部分的样式。

我可以将伪元素与JavaScript一起使用吗？

伪元素不是DOM的一部分，因此无法使用JavaScript直接访问或操作它们。但是，您可以通过使用JavaScript更改父元素的样式来更改应用于伪元素的样式。

如何使用::selection伪元素？

::selection伪元素用于更改用户所选文本的外观。例如，您可以更改所选文本的背景颜色和文本颜色。这是一个示例：

<code class="language-css">blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}</code>

我可以为伪元素设置动画吗？

是的，您可以使用CSS动画或过渡为伪元素设置动画。但是，请记住并非所有属性都可以设置动画。例如，您可以为伪元素的不透明度或变换设置动画，但不能为content属性设置动画。

以上是ATOZ CSS屏幕截图：CSS伪元素的详细内容。更多信息请关注PHP中文网其他相关文章！