CSS 伪元素零基础入门：从看懂代码到独立实操的保姆级指南CSS 伪元素：网页设计的隐形帮手在网页开发的世界里，CSS

CSS 伪元素：网页设计的隐形帮手

在网页开发的世界里，CSS 作为美化页面的重要工具，其中有一个实用的特性 —— 伪元素。它不需要在 HTML 中额外添加标签，就能为页面增添各种独特的视觉效果。那么，伪元素究竟是什么？又该如何巧妙运用呢？

一、伪元素：不是元素的 “元素”

从名称看，“伪元素” 颇具迷惑性。它虽形似真实 HTML 元素，能应用各类 CSS 样式，参与页面布局，但本质上并非 DOM 树的一部分，而是通过 CSS 声明在渲染时生成的虚拟元素。

在 CSS 中，伪元素主要通过 **::before和::after来使用。::before表示选中元素内容开始之前的位置 **，::after则表示内容结束之后的位置 。例如，我们在 HTML 中仅有一个简单的<p>标签：

<h1>这是一个标题</h1>
<p>这是一段文本</p>

此时，在 CSS 中添加如下代码：

p::before {
    content: "前置内容：";
    color: red;
  }
p::after {
    content: " 后置内容";
    color: blue;
}

最终在页面上呈现的效果就会是 “前置内容：这是一段文本后置内容”，前后新增的内容就是通过伪元素创建出来的，而在 DOM 树中，我们依然只能看到<p>标签本身。

浏览器中的效果：

二、伪元素的核心特性

content 属性

在使用伪元素时，content属性是必须设置的。它用于定义伪元素中的内容，是伪元素能够显示在页面上的关键，若不设置content，伪元素会失去作用。

content的值形式多样，最常见的是空字符串""，例如在制作装饰性线条时：
```
h1::before {
    content: "";
    /* 独占一行 */
    display: block; 
    height: 1px;
    background-color: gray;
}
```
这里content设置为空字符串，配合display: block以及背景色等属性，就可以生成一条水平分割线。除此之外，content还可以是具体的文本，如 **content: "温馨提示：";** ；也能引用元素的属性值，像 **content: attr(data-tooltip);** ；甚至能够插入图片，即 **content: url(icon.png);** 。
默认显示属性与调整

伪元素默认的display属性值为inline，这意味着它会像行内元素一样排列在文本流中。不过，在实际应用里，我们可以根据需求灵活改变其显示方式。比如，当需要将伪元素作为一个独立的块状区域进行布局时，就可以将display设置为 **block；若要实现弹性布局，display: flex** 也是不错的选择。

三、伪元素的广泛应用场景

装饰性效果的实现

过渡效果下划线

伪元素在创建装饰性效果方面有着得天独厚的优势。以添加下划线为例，传统方式可能需要在 HTML 中添加额外的<span>标签并设置样式，而使用伪元素则简洁得多：

    <h1>这是一个标题</h1>
    <p>这是一段文本</p>
    <a href="#" class="decorated-link">更多的内容</a>

.decorated-link {
  color: #007bff;
  text-decoration: none;
  position: relative;
}
.decorated-link::before {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: orange;
  /* 从右边收回 */
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}
.decorated-link:hover::before {
  /* 从左边发出 */
  transform: scaleX(1);
  transform-origin: bottom left;
}

箭头图标

上述代码实现了鼠标悬停时下划线逐渐消失的动态效果。此外，向右箭头、图标等装饰性元素也都可以通过伪元素轻松完成，比如：

.box2 {
  position: relative;
  height: 100px;
  background-color: rgba(181, 174, 175, 0.571);
  /* 右对齐居中 行高=盒子高度 */
  color: white;
}
.box2::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid rgb(14, 14, 14);
  right: 15px;
  top: 45%;
  /* 左边框透明 */
  border-left-color: transparent;
  /* 下边框透明 */
  border-bottom-color: transparent;
  /* 旋转45度 */
  transform: rotate(45deg);
}

<div class="box">
        &gt;
    </div>
<div class="box2"></div>

清除浮动的巧妙手段

在布局中，清除浮动是一个常见的需求。利用伪元素，我们可以优雅地解决这个问题。为需要清除浮动的容器添加如下 CSS 样式：
```
.clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
```
当在 HTML 中对包含浮动元素的父容器应用.clearfix类时，就能够自动清除浮动带来的影响，使布局恢复正常。
响应式内容的动态呈现

伪元素还可以结合媒体查询，实现响应式内容的动态变化。例如，在小屏幕设备上为文本添加特定提示：
```
@media (max-width: 768px) {
    .mobile-tip::before {
        content: "小屏提示：";
        color: yellow;
     }
}
```
当页面宽度小于等于 768px 时，带有.mobile-tip类的元素前就会显示相应提示信息。

CSS 伪元素零基础入门：从看懂代码到独立实操的保姆级指南

CSS 伪元素：网页设计的隐形帮手

一、伪元素：不是元素的 “元素”

二、伪元素的核心特性

content 属性

三、伪元素的广泛应用场景