CSS 伪元素
伪类可以定义为与组合到定义所选元素特殊状态的选择器的关键字。与伪类不同，伪元素用于设置元素的特定部分的样式，而伪类用于设置元素的样式。
例如，伪元素可以是用于设置元素的第一个字母或第一行的样式。伪元素还可以用于在元素之后或元素之前插入内容。
语法
伪元素具有简单的语法，如下所示：
selector::pseudo-element {
property: value;
}
我们在语法中使用了
双冒号（::pseudo-element）。在CSS3中，双冒号代替了伪元素的单冒号表示法。 W3C试图区分伪元素和伪类。因此，建议使用
双冒号（::pseudo-element），而不是使用单冒号
（:）。
在CSS1和CSS2，伪元素和伪类都使用单个冒号
（:）语法。单一冒号语法对CSS1和CSS2中的伪元素有效，以实现向后兼容。
尽管有几种
CSS 伪元素，我们正在讨论一些最常用的元素。广泛使用的CSS伪元素列表如下：
| 伪元素 |
说明 |
| ::first-letter (:first-letter) |
它选择文本的第一个字母。 |
| ::first-line (:first-line) |
它为文本的第一行设置样式。 |
| ::before (:before) |
用于在元素内容之前添加一些内容。 |
| ::after (:after) |
用于在元素的内容之后添加一些内容。 |
| ::selection |
它用于选择用户选择的元素的区域。 |
让我们讨论上述伪元素以及示例。
::first-letter伪元素
它影响文本的第一个字母，它只能应用于块级元素。它不支持所有CSS属性，而是支持下面提供的一些CSS属性。
color属性（例如颜色）
font属性（例如字体样式，字体系列，字体大小，字体颜色等等）。
margin属性（例如margin-top, margin-right, margin-bottom, and margin-left）。
border属性（例如border-top，border-right，border-bottom，border-left，border-color，border-width等）。
padding属性（例如，padding-top, padding-right, padding-bottom, and padding-left）。
background属性（例如背景颜色，背景重复，背景图像和背景位置）。
与文本相关的属性（例如，text-shadow, text-transform, text-decoration等）。
其他属性vertical-align（仅当 float 为' none '时）word-spacing、line-height、line-spacing。
示例
<html>
<head>
<style>
body {
text-align: center;
}
h1::first-letter {
font-family: Lucida Calligraphy;
font-size: 3cm;
color: red;
text-shadow: 5px 8px 9px green;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1> Welcome to the lidihuo.com </h1>
<h2> This is an 示例 of ::first-letter pseudo-element. </h2>
</body>
</html>
输出
::first-line伪元素
它与
:: first-letter 伪元素相似，但会影响整行。它将特殊效果添加到文本的第一行。它支持以下CSS属性：
颜色属性（例如颜色）
字体属性（例如字体样式，字体系列，字体大小，字体颜色等等）。
背景属性（例如背景颜色，背景重复，背景图像和背景位置）。
其他属性是单词间距，字母间距，行高，垂直对齐，文本转换，文本修饰。
示例
在此示例中，我们将看到使用
:: first-line 元素向该元素的第一个元素添加特殊效果线。
<html>
<head>
<style>
body {
text-align: center;
}
h1::first-line {
font-family: Lucida Calligraphy;
font-size: 1cm;
color: red;
text-shadow: 5px 8px 9px green;
}
</style>
</head>
<body>
<h1> Welcome to the lidihuo.com. This site is developed so that students may learn computer science related technologies easily. The lidihuo.com is committed to provide easy and in-depth tutorials on various technologies. </h1>
<h2> This is an 示例 of ::first-line pseudo-element. </h2>
</body>
</html>
输出
:: before伪元素
它允许我们在元素内容之前添加一些内容。它用于在元素的特定部分之前添加内容。通常，它与
content 属性一起使用。
我们还可以使用此伪元素在内容之前添加常规字符串或图像。
示例
<html>
<head>
<style>
body {
text-align: center;
}
h1::before {
content: "'Hello World.'";
color: red;
}
</style>
</head>
<body>
<h1>Welcome to the lidihuo.com. </h1>
<h2> This is an 示例 of ::before pseudo-element. </h2>
<h3> In the first line the "Hello World" has added by using the pseudo-element ::before </h3>
</body>
</html>
输出
:: after伪元素
它的工作方式类似于
:: before 伪元素，但是它将内容插入到元素的内容之后。它用于在元素的特定部分之后添加内容。通常，它与content属性一起使用。
它还允许我们在内容后添加常规字符串或图像。
示例
<html>
<head>
<style>
body {
text-align: center;
}
h1::after {
content: "'Welcome to the lidihuo.com.'";
color: red;
}
</style>
</head>
<body>
<h1> Hello World. </h1>
<h2> This is an 示例 of ::after pseudo-element. </h2>
<h3> In the first line the "Welcome to the lidihuo.com." has added by using the pseudo-element ::after </h3>
</body>
</html>
输出
:: selection伪元素
它用于设置用户选择的元素部分的样式。我们可以使用以下CSS属性：
颜色。
背景色。
其他属性包括光标，轮廓线等
示例
<html>
<head>
<style>
body {
text-align: center;
}
h1::selection {
color: red;
}
</style>
</head>
<body>
<h1> Hello World. </h1>
<h2> Select the text in first line to see the effect. </h2>
<h3> This is an 示例 of ::selection pseudo-element. </h3>
</body>
</html>
CSS类和伪元素
伪元素可以与CSS类结合使用，以对具有该类的特定元素进行样式设置。将CSS类与伪元素组合在一起的语法如下。
语法
它可以写为：
selector.class::pseudo-element {
property: value
}
示例
<html>
<head>
<style>
body {
text-align: center;
}
h1.example::first-letter {
color: red;
font-size: 2cm;
font-family: Lucida Calligraphy;
}
</style>
</head>
<body>
<h1 class="example"> Hello World. </h1>
<h1> Welcome to the lidihuo.com. </h1>
<h3> This is an 示例 of pseudo-element with CSS classes.</h3>
</body>
</html>
