CSS `Standardizing Pseudo-elements` (`::before`, `::after`) 的行为与限制

各位观众老爷们，晚上好！我是今天的主讲人，咱们今儿个唠唠CSS里两位“伪”大人物——::before和::after，以及它们那既可爱又让人头疼的“标准”行为和种种限制。别看它们名字里带个“伪”字，实力可一点都不伪，用好了能让你的网页瞬间高大上，用不好嘛…那就等着被设计师追着打吧！

一、伪元素是个啥？别跟伪君子搞混了！

首先，咱们得搞清楚，::before 和 ::after 到底是个什么玩意儿？它们是CSS的伪元素。别跟那些道貌岸然的伪君子混为一谈啊！伪元素，顾名思义，就是“假的”元素。它们实际上并不存在于你的HTML结构里，而是通过CSS硬生生地“创造”出来的。

你可以把它们想象成化妆术。HTML是你的素颜，CSS是化妆品，而::before和::after就是你高超的化妆技巧，能给你脸上P出不存在的腮红和高光（当然，网页上P的不是腮红高光，而是各种各样的装饰和效果）。

二、::before和::after 的基本语法和用法

语法很简单，就是这样：

selector::before {
  /* 各种CSS属性 */
}

selector::after {
  /* 各种CSS属性 */
}

selector: 这是你想要添加伪元素的目标选择器，可以是任何有效的CSS选择器，比如div、.class、#id等等。
::before: 在目标元素的内容之前插入一个伪元素。
::after: 在目标元素的内容之后插入一个伪元素。
content: 这是最重要的属性！没有它，伪元素就相当于一个隐形人，你根本看不到它。content 属性可以设置文本、图片、计数器等等。

举个栗子：给链接加个小箭头

HTML:

<a href="#">这是一个链接</a>

CSS:

a::after {
  content: "→"; /* 或者用unicode字符："2192" */
  margin-left: 5px;
}

效果： "这是一个链接→"

在这个例子中，我们给所有<a>标签的后面添加了一个小箭头。是不是很简单？

三、content属性的各种姿势

content属性是伪元素的灵魂，它决定了伪元素的内容。除了上面例子中的文本，它还可以玩出很多花样：

空字符串 (content: "";): 这是最常见的用法。很多时候，我们只是需要一个空的伪元素来做一些装饰性的事情，比如画个边框、加个背景等等。

.box::before {
  content: ""; /* 必须要有，即使是空字符串 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  z-index: -1; /* 放到元素下面 */
}

URL (content: url("image.jpg");): 你可以用content来插入图片。

.logo::before {
  content: url("logo.png");
  display: block; /* 默认是inline，需要改成block才能设置宽高 */
  width: 100px;
  height: 50px;
}

attr()函数 (content: attr(data-title);): 这个函数可以获取HTML元素的属性值，并将其作为伪元素的内容。

HTML:

<div class="item" data-title="我是标题"></div>

CSS:

.item::before {
  content: attr(data-title);
  font-weight: bold;
}

效果： "我是标题" (加粗)

counter()函数 (content: counter(my-counter);): 这个函数可以用来生成计数器，常用于列表编号。

ol {
  counter-reset: my-counter; /* 初始化计数器 */
  list-style: none; /* 隐藏默认的列表样式 */
}

li::before {
  counter-increment: my-counter; /* 每次递增计数器 */
  content: counter(my-counter) ". "; /* 显示计数器 */
  font-weight: bold;
}

HTML:

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

效果：

第一项
第二项
第三项

四、伪元素的“标准”行为和限制

好了，说了这么多用法，现在咱们来聊聊伪元素的“标准”行为和一些需要注意的限制。

必须要有content属性: 这是铁律！没有content，伪元素就等于不存在。
默认是 inline 元素: 这意味着你需要手动设置display: block; 或 display: inline-block; 才能让它们像块级元素或行内块级元素一样工作，才能设置宽高、margin、padding等等。
只对 “正常”的元素有效: 伪元素只能添加到“正常”的HTML元素上，比如<div>、<p>、<span>等等。有一些元素是不能添加伪元素的，比如 <img>, <input>, <iframe>。
继承性: 伪元素会继承父元素的某些属性，比如字体、颜色等等。
定位: 伪元素的定位方式和普通元素一样，可以使用position: absolute;、position: relative;等等。
层叠上下文: 伪元素会创建新的层叠上下文，这意味着它们的z-index属性会受到父元素层叠上下文的影响。
无法被JavaScript直接操作: 因为它们并不存在于DOM树中，所以你无法用document.getElementById()之类的JavaScript方法来直接获取和操作它们。
SEO: 搜索引擎通常不会抓取伪元素的内容，所以不要用它们来显示重要的信息。

五、实战案例：用伪元素打造炫酷的按钮效果

光说不练假把式，咱们来个实战案例，用伪元素打造一个炫酷的按钮效果。

HTML:

<a href="#" class="button">点击我</a>

CSS:

.button {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color: #007bff;
  text-decoration: none;
  border-radius: 5px;
  overflow: hidden; /* 隐藏超出按钮范围的伪元素 */
}

.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%); /* 白色渐变光 */
  transform: translateX(-100%); /* 初始位置在按钮左侧 */
  transition: transform 0.3s ease-in-out; /* 过渡效果 */
}

.button:hover::before {
  transform: translateX(0); /* 鼠标悬停时移动到按钮右侧 */
}

效果：

当鼠标悬停在按钮上时，会有一个白色的光从左向右扫过。这个效果就是通过伪元素和transform属性实现的。

六、常见问题和注意事项

在使用伪元素时，经常会遇到一些问题，这里给大家总结一下：

伪元素不显示: 最常见的原因是忘记写content属性了，或者content的值是空的。
伪元素的位置不对: 检查一下父元素的position属性是否设置正确，伪元素的position属性是否设置正确，以及top、left、right、bottom等属性是否设置正确。
伪元素的样式不起作用: 检查一下伪元素的display属性是否设置正确，以及是否有其他样式覆盖了伪元素的样式。
伪元素的内容被父元素遮挡: 检查一下伪元素的z-index属性是否设置正确，以及父元素的overflow属性是否设置正确。

七、::before vs ::after：谁才是大哥？

::before和::after的区别仅仅在于它们插入的位置不同：::before在元素内容之前，::after在元素内容之后。但是，这个小小的区别却决定了它们的应用场景。

特性	`::before`	`::after`
插入位置	元素内容之前	元素内容之后
常用场景	添加装饰性元素，比如边框、背景、图标等	添加闭合标签、提示信息、小箭头等
层叠顺序	在元素内容之下	在元素内容之上
是否影响布局	可能会影响布局，取决于`position`属性	可能会影响布局，取决于`position`属性

八、伪元素与CSS Grid和Flexbox的结合

伪元素可以和CSS Grid和Flexbox完美结合，创造出更复杂的布局效果。

Grid: 你可以把伪元素当成Grid容器的子项来布局。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid-item::before {
  content: "";
  grid-column: 1 / 3; /* 占据两列 */
  height: 10px;
  background-color: red;
}

Flexbox: 你可以把伪元素当成Flexbox容器的子项来布局。

.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-item::after {
  content: "";
  flex-grow: 1; /* 占据剩余空间 */
}

九、总结

总而言之，::before 和 ::after 是CSS中非常强大且灵活的工具。掌握它们，你可以轻松地实现各种各样的装饰效果，而无需修改HTML结构。但是，在使用它们时，一定要注意它们的“标准”行为和限制，避免踩坑。

希望今天的讲座能帮助大家更好地理解和使用伪元素。记住，熟能生巧，多加练习，你也能成为伪元素大师！

散会！大家可以自由活动了，但是别忘了回去敲代码啊！争取早日做出让设计师都惊叹的网页！

发表回复 取消回复

发表回复取消回复