8.1 伪元素的种类
CSS中的伪元素允许你给元素的特定部分加样式，比如首字母，首行，或者在元素前后添加内容。它们提供了额外的样式功能，不需要更改HTML结构。伪元素用双冒号 (::) 标识。
主要伪元素：
::before::after::first-letter::first-line
8.2 伪元素::before
伪元素::before会在元素的内容之前添加内容。它经常用来添加装饰元素，图标或额外文本。
语法：
选择器::before {
content: "" | "文字" | url() | counter | attr();
属性: 值;
}
在content字段中指定要添加的html代码。
CSS
/* 在每个列表项前添加箭头 */
li::before {
content: "→ ";
color: red;
}
HTML
<ul>
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ul>
8.3 伪元素::after
伪元素::after会在元素的内容之后添加内容。它经常用来添加装饰元素，图标或额外文本。
语法：
选择器::after {
content: "" | "文字" | url() | counter | attr();
属性: 值;
}
在content字段中指定要添加的html代码。
CSS
/* 在每个列表项后添加点 */
li::after {
content: " •";
color: blue;
}
HTML
<ul>
<li>第一个列表项</li>
<li>第二个列表项</li>
<li>第三个列表项</li>
</ul>
8.4 伪元素::first-letter
伪元素::first-letter适用于元素的首字母。它经常用于创建段落中的装饰性首字母。
语法：
选择器::first-letter {
content: "" | "文字" | url() | counter | attr();
属性: 值;
}
示例：
CSS
/* 增大并改变每个段落首字母的颜色 */
p::first-letter {
font-size: 2em;
color: green;
}
HTML
<p>这是段落中的示例文本。</p>
<p>另一个段落中的示例文本。</p>
8.5 伪元素::first-line
伪元素::first-line适用于元素的首行。它经常用于为段落的首行设置样式。
语法：
选择器::first-line {
content: "" | "文字" | url() | counter | attr();
属性: 值;
}
示例：
CSS
/* 改变第一行每个段落的颜色并加粗 */
p::first-line {
color: navy;
font-weight: bold;
}
HTML
<p>
这是一个段落中的文本示例，包含足够的文本以分成多行，展示伪元素::first-line如何工作。每个段落的第一行将加粗并用海军蓝显示，以吸引读者的注意。这个效果是通过我们上面定义的CSS规则实现的。
</p>
<p>
请注意，仅对第一行应用样式，无论其长度如何。段落中的其余文本保留原始样式。这可以用于突出关键点或在文本中创建视觉节奏。
</p>
GO TO FULL VERSION