CSS伪元素有哪些？CSS伪元素的详情介绍（内附实例）
在CSS的日常开发中，伪元素是我们经常会用到的特性，它允许我们为元素的特定部分添加样式，而不需要额外在HTML中插入新的标签。对于很多刚接触CSS的开发者来说，可能对伪元素的概念还比较模糊，甚至和伪类混淆。本文会详细介绍CSS中常见的伪元素，搭配实际代码示例帮助大家理解和使用。
什么是CSS伪元素
CSS伪元素用于创建不在文档树中的元素，并为其添加样式。简单来说，它可以选择元素的某个部分，或者生成文档树中不存在的元素，然后对这些部分或生成的元素设置样式。伪元素通常以双冒号::作为前缀，不过为了兼容旧版本浏览器，部分伪元素也支持单冒号:的写法，不过现在更推荐使用双冒号来区分伪元素和伪类。
常见的CSS伪元素及用法
1. ::before 和 ::after
这两个是日常开发中使用频率最高的伪元素。::before用于在选中元素的内容之前插入生成的内容，::after用于在选中元素的内容之后插入生成的内容。这两个伪元素必须配合content属性使用，如果没有设置content，伪元素不会生效。
下面是一个简单的示例，我们给一个按钮的前后分别添加装饰符号：
/* 基础按钮样式 */
.btn {
padding: 8px 16px;
background-color: #409eff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
/* 按钮前添加左箭头 */
.btn::before {
content: "<";
margin-right: 6px;
font-weight: bold;
}
/* 按钮后添加右箭头 */
.btn::after {
content: ">";
margin-left: 6px;
font-weight: bold;
}对应的HTML结构如下：
<button class="btn">点击跳转</button>
运行后按钮文字前后会分别显示<和>符号，不需要额外在HTML里添加span标签，保持了结构的简洁。
2. ::first-letter
::first-letter伪元素用于选中块级元素的第一个文字，我们可以为这个首字设置特殊的样式，比如首字下沉的效果，常见于文章排版中。
下面的示例实现一个简单的首字下沉效果：
/* 文章段落样式 */
.article-text {
line-height: 1.8;
font-size: 16px;
color: #333;
text-indent: 2em;
}
/* 首字样式 */
.article-text::first-letter {
font-size: 32px;
font-weight: bold;
color: #e63946;
float: left;
margin-right: 8px;
line-height: 1;
}<p class="article-text"> CSS伪元素是CSS中非常实用的特性，它可以帮助我们简化HTML结构，实现很多特殊的样式效果，不需要额外添加冗余的标签。掌握伪元素的使用，能让我们在开发过程中更加高效。 </p>
运行后段落的第一个字会变大、加粗，并且向左浮动，形成首字下沉的效果。
3. ::first-line
::first-line伪元素用于选中块级元素的第一行文本，我们可以为第一行设置不同的样式，比如加粗、改变颜色等，常用于文章标题下方的摘要行样式设置。
示例代码如下：
/* 文章段落样式 */
.article-text {
line-height: 1.8;
font-size: 16px;
color: #333;
width: 300px; /* 限制宽度让文本换行，方便看到第一行效果 */
}
/* 第一行文本样式 */
.article-text::first-line {
font-weight: bold;
color: #409eff;
}<p class="article-text"> CSS伪元素是CSS中非常实用的特性，它可以帮助我们简化HTML结构，实现很多特殊的样式效果，不需要额外添加冗余的标签。掌握伪元素的使用，能让我们在开发过程中更加高效。 </p>
运行后段落的第一行文本会显示为加粗的蓝色，其余行保持默认样式。
4. ::selection
::selection伪元素用于选中用户用鼠标拖动选中的文本部分，我们可以为选中状态设置背景色和文字颜色，优化页面的交互体验。
示例代码如下：
/* 全局选中文本样式 */
::selection {
background-color: #409eff;
color: #fff;
}
/* 单独为某个元素的选中文本设置样式，优先级更高 */
.special-text::selection {
background-color: #e63946;
color: #fff;
}<p>这是普通文本，选中后会显示蓝色背景白色文字。</p> <p class="special-text">这是特殊文本，选中后会显示红色背景白色文字。</p>
当用户用鼠标选中文本时，就会按照设置的样式显示选中状态。
5. ::placeholder
::placeholder伪元素用于设置表单输入框中占位符文本的样式，比如修改占位符的颜色、字体大小等，不过需要注意不同浏览器对::placeholder的支持可能需要加前缀，不过现在大部分现代浏览器已经不需要前缀也能正常生效。
示例代码如下：
/* 输入框基础样式 */
.input-box {
padding: 8px 12px;
border: 1px solid #dcdfe6;
border-radius: 4px;
font-size: 14px;
width: 240px;
}
/* 占位符样式 */
.input-box::placeholder {
color: #c0c4cc;
font-size: 13px;
}<input type="text" class="input-box" placeholder="请输入用户名">
运行后输入框的占位符文字会显示为浅灰色，字号比输入的文字小一点，提升表单的视觉效果。
伪元素使用的注意事项
::before和::after伪元素生成的 content 内容无法被用户选中，也不会出现在DOM树的节点中，所以如果需要被选中或者需要被JavaScript操作的内容，不建议用伪元素生成。- 伪元素只能应用在双标签元素上，单标签元素（比如
<img>、<input>）无法使用::before和::after伪元素。 - 如果伪元素的
content属性值为空，或者没有设置content属性，伪元素不会在页面中渲染。 - 伪元素的优先级和对应的元素本身有关，如果要覆盖伪元素的样式，需要保证选择器的优先级足够高。
总结
CSS伪元素是非常实用的特性，合理使用可以减少HTML冗余标签，实现很多特殊的样式效果。本文介绍的::before、::after、::first-letter、::first-line、::selection、::placeholder是最常用的伪元素，大家可以在实际开发中多尝试使用，逐渐掌握它们的用法和适用场景。