CSS中的 5 类常见伪元素详解！

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

285篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

CSS 伪元素用于创建特定的特殊效果，它们可以用于选择和样式化元素的某些部分，这些部分在文档树中并不存在作为可访问的元素节点。

伪元素主要用于添加装饰性的效果，例如添加前缀内容、创建边框效果等。

而前文的伪类CSS伪类大全！4大类伪类详解用于根据特定条件为已有元素添加样式，它们描述了元素的某个状态，如:hover、:focus、:nth-child()等。

伪元素在 CSS 中使用两个冒号（::）作为前缀，例如：

.my-element::before {
  content: "This is before the element's content";
}
 
.my-element::after {
  content: "This is after the element's content";
}

ok，那我们一起来看看吧。

5 个常见伪元素

一、 ::before

::before 伪元素用于在元素的内容之前插入内容。可以使用的属性取决于所生成的内容，一般来说可以使用的属性与普通元素一样，它的使用。

.my-element::before {
  content: "「This is before the element's content";
  color: red;
  font-weight: bold;
}

但需要注意：

• 需要指定 content 属性，否则伪元素不会显示。

• 伪元素默认为内联元素，可以通过设置 display 属性改变其显示方式。

二、 ::after

::after 伪元素用于在元素的内容之后插入内容。注意事项和 ::before 一样。

.my-element::after {
  content: "This is after the element's content」😆";
  color: red;
  font-weight: bold;
}

::before 和 ::after 伪元素在网页设计中其实玩法超多，比如：

1. 添加装饰性内容：可以在元素前后添加图标、边框、线条等装饰性元素，增强视觉效果。

2. 创建三角形等形状：通过透明边框技巧，可以仅使用CSS创建三角形，常用于下拉箭头、提示标签等。

3. 列表图标：为列表项（

4. ）自定义图标或符号，而不是使用浏览器默认的列表样式。

5. 清除浮动：使用 ::after 伪元素和 clear 属性来清除浮动，避免使用额外的空元素。

6. 创建渐变效果：在图片上添加渐变遮罩，用于展示图片上的文本或其他装饰。

7. 模拟按钮开关：通过 ::before 和 ::after 创建类似开关的UI组件，通过状态切换改变样式。

8. 创建复杂的图形和动画：利用伪元素和CSS3特性，可以创造出星形、心形等复杂的图形，以及相应的动画效果。

9. 响应式设计：结合媒体查询，动态调整元素样式，实现响应式布局。

10. 节省HTML标签：通过伪元素添加内容，减少额外的HTML标记，使代码更加简洁。

11. 实现工具提示（Tooltips）：为元素添加工具提示，当用户悬停在元素上时显示额外信息。

12. 创建自定义的下拉选择框：通过伪元素设计自定义样式的选择框，提高用户界面的美观度。

13. 实现图片边框和阴影效果：为图片添加自定义边框和阴影，增强图片的展示效果。

14. 创建加载动画：利用伪元素和CSS动画创建加载时的旋转效果或进度条。

这些场景展示了 ::before 和 ::after 伪元素的灵活性和强大功能，它们可以帮助开发者和设计师在不增加额外HTML结构的情况下，通过CSS创造出丰富的视觉效果。

三、 ::selection

::selection 伪元素用于选择元素的选中文本，并对其进行样式化。可以设置选择文本的样式属性，如背景色、颜色等。

::selection {
  background-color: yellow;
  color: #f00;
}

选中文字以后，效果如下：

需要注意的是：

• 仅适用于部分浏览器，且不同浏览器对其支持程度有所差异。

• 不推荐修改文本的可读性，以避免降低用户体验。

四、 ::first-line

::first-line，伪元素用于选择元素的第一行文本，并对其进行样式化，可以设置文本的样式属性，如字体、颜色、背景等。

p::first-line {
  color: red;
  font-weight: bold;
}

注意：只能应用于块级元素，不能应用于表格元素，不包括任何内联元素。

五、 ::first-letter

::first-letter， 伪元素用于选择元素的首字母，并对其进行样式化。可以设置字母的样式属性，如字体、大小、颜色等。

p::first-letter {
  color: red;
  font-size: 20px;
}

注意：只能应用于块级元素和某些其他特定元素，如段落和标题等，字母不能位于其他标记之内。

第一块效果是前2个伪元素，后三个是依次的伪元素效果，如下：

那你可能会说，为什么是双引号呢？这里就得科普一下 CSS 的一些历史了~

双冒号（::）是 CSS3 中伪元素的语法。它用于区分伪类（使用单冒号）和伪元素，提高代码的可读性，而单冒号（:）是 CSS2 中伪类和伪元素的共同语法。在 CSS3 中，单冒号继续用于伪类，而伪元素则改为使用双冒号。

在 CSS3 出现之前，伪类和伪元素都使用单冒号。但为了更清晰地区分伪类和伪元素，CSS3 推荐使用双冒号来表示伪元素。

但也不是说，必须用双引号，由于向后兼容性的原因，许多浏览器仍然也支持单冒号语法（例如 :before 和 :after）。

OK，本文完。