层叠样式表（css）是一种独立的语言，用于描述web应用程序的表示。这涉及到诸如颜色、字体和HTML元素布局的完全控制等概念。
在本文中，将为您介绍级联样式表中的伪元素，以及如何将它们与兼容性一起使用的实际示例。
css中的伪元素是什么？
CSS伪元素是添加到CSS选择器的关键字，可用于设置所选HTML元素的特定部分的样式。在CSS3中，通常用两个冒号（例如::first-line）表示，以将它们与伪类区分开。相反，CSS2语法使用一个冒号（例如:first-line）。
伪元素语法
CSS伪元素的一般语法如下所示：
selector::pseudo-element {
property: value;
}
它看起来就像普通的样式设置语句，但是使用冒号来指示要设置样式的选择器中包含的元素的特定部分。
CSS中的伪元素
目前css中有七个伪元素。他们是：
::after
::before
::first-letter
::first-line
::marker
::placeholder
::selection
还有其他一些，但它们仍被认为是实验技术。因此，在本文中，重点将放在主要的七个伪元素上。
工作演示
在本文中，将在一个简单的演示文件夹中向您介绍这些伪元素中的每一个。要遵循，您将需要：
代码编辑器-推荐Visual Studio Code
用于提供HTML代码的实时服务器。 您可以在VS Code中下载一个。 首先，转到扩展标签。 您会在收藏夹扩展列表旁边看到搜索栏。 搜索“实时服务器”（下载量将近500万）
现在，创建一个文件夹，将其命名为伪，然后使用VS Code打开它。创建两个文件：
index.html：这是我们用于内容的HTML代码的去向main.css：这是进行样式设置的地方
将下面的启动代码复制到您的index.html文件中：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<link rel=”stylesheet” type=”text/css” href=”main.css”>
</head>
<body>
<p>hello world!</p>
</body>
</html>
粗体代码显示我们已将内容链接到样式表-在您的示例中是main.css。接下来，将此测试样式复制到main.css文件中进行测试：
p{
color: aqua;
}
如果单击VS Code应用程序页脚中的“上线”按钮，您将被重定向到默认浏览器，在该浏览器中已为您启动了托管该网页的实时远程服务器。
:: after (:after)
:: after创建一个伪元素，该元素代表所选HTML元素的最后一个子元素。它用于与CSS content属性协作将样式添加到此特定元素。语法如下所示：
selector::after {
content: "value";
}
将下面的代码复制到index.html文件：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<link rel=”stylesheet” type=”text/css” href=”main.css”>
</head>
<body>
<p class=”one”>This is my very first paragraph.
This is my very first paragraph.
This is my very first paragraph.
This is my very first paragraph.</p>
<p class=”three”>This is my second paragraph.</p>
<p class=”two”>This is my last but not the least paragraph</p>
</body>
</html>
现在，在您的main.css文件中，复制以下代码：
.one::after {
content: “ — 1”;
color: blue;
}
.two::after {
content: “ — 2”;
color: red;
}
这只是将字符串添加到所选元素之前（在本例中为指向各个段落的类），并更新其颜色。
::before (:before)
:: before创建一个伪元素，该元素代表所选HTML元素的第一个子元素。默认情况下，它是内联的，用于与CSS content属性协作将样式添加到此特定元素。语法如下所示：
selector::before {
content: "value";
}
您的index.html文件将保持不变，但是在main.css文件中，复制以下代码：
.one::before {
content: “1--”;
color: blue;
}
.two::before {
content: “2--”;
color: red;
}
这只是将字符串添加到所选元素之前（在本例中为指向各个段落的类），并更新其颜色。
::first-letter (:first-letter)
::first-letter创建一个伪元素，表示一个块元素第一行的第一个字母，只要它不在图像或表格之后。
selector::first-letter {
property: value;
}
然而，重要的是要认识到元素的第一个字母很难识别。像标点符号这样的东西在逻辑上可以算作第一个字母。有些语言的有向图总是大写在一起，比如荷兰语中的ij。在这些情况下，有向图的两个字母都应该与::first-letter伪元素匹配。
::before伪元素与content属性一起也可以创建第一个元素，因此在调试CSS时请牢记这些。
将以下样式代码复制到main.css文件中，以查看::first-letter的作用：
p::first-letter {
color: red;
font-size: 130%;
}
::first-line (:first-line)
::first-line创建一个伪元素，该伪元素代表block元素的第一行。就像第一个字母一样，第一行也取决于一些因素，例如元素的宽度，文档的宽度以及元素的字体大小。 ::first-line伪元素的语法如下：
selector::first-line {
property: value;
}
将以下样式复制到您的main.css文件中：
p {
font-size: 130%;
}
p::first-line {
color: red;
font-size: 130%;
}
第一个段落样式将放大段落的字体，以便从给定的字符串中获得一行。
::marker
::marker伪元素选择列表项的标记框，该列表框通常包含项目符号或数字。它用于列表项和摘要元素。语法如下所示：
selector ::marker {
property: value;
}
将下面的列表项代码添加到您的index.html文件中：
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
将以下::marker样式复制到main.css文件中，以查看其作用：
ul li::marker {
color: blue;
font-size: 130%;
}
::placeholder
::placeholder伪元素指向演示文稿中输入元素的占位符，通常在表单中找到。默认情况下，大多数浏览器会将浅灰色应用于占位符。语法如下所示：
selector ::placeholder {
property: value;
}
将此输入行复制到您的index.html文件中：
<input placeholder="Type something here!">
将以下样式复制到main.css文件中以查看更改：
input::placeholder {
color: red;
font-size: 1.2em;
font-style: italic;
}
::selection
::selection伪元素适用于DOM上突出显示的元素。语法如下所示：
selector ::selection {
property: value;
}
::selection伪元素上可以使用一些属性：color, background-color, cursor, caret-color, outline, text-decoration, text-emphasis-color, 和text-shadow.
将以下样式复制到您的main.css文件中：
p::selection {
background-color: red;
}
如果您在浏览器中显示，它将看起来像这样：
浏览器兼容性
您可能想了解一些有关浏览器支持的伪元素的有用信息：
除Safari和Opera外，所有流行的浏览器都完全支持:: after伪元素
除Safari，Internet Explorer 9和Opera外，所有流行的浏览器都完全支持:: before伪元素。
:: marker伪元素仅受Firefox支持
除了iOS设备上的Safari以外，所有浏览器均支持:: first-letter伪元素
每个屏幕尺寸的每个浏览器都完全支持:: first-line伪元素
除了Internet Explorer，所有浏览器均支持:: placeholder伪元素。
所有网络浏览器均支持:: selection伪元素
结论
CSS仍然是现代Web开发过程中不可或缺的一部分。Web开发人员花一些时间来学习CSS基础非常重要。CSS中的伪元素将帮助您扩展知识，并为您提供更多激动人心的样式选择。
原文地址：https://blog.logrocket.com/a-guide-to-css-pseudo-elements/
▼
原创系列推荐
▼
5. Webpack4 入门（上）|| Webpack4 入门（下）
6. MobX 入门（上） || MobX 入门（下）
7. 59篇原创系列汇总
回复“加群”与大佬们一起交流学习~
点这，与大家一起分享本文吧~