CSS 伪元素

伪类和伪元素名字像，但作用完全不同。伪类选的是元素的”状态”，比如鼠标悬停的按钮。伪元素则是给元素”再造一部分”，比如在文字前面插入一个图标。上一篇文章讲过的 CSS 伪类 用单冒号，伪元素用双冒号。

双冒号的区别

伪元素标准写法是双冒号 ::，比如 ::before、::after。老浏览器里用单冒号也能识别，现代浏览器统一用双冒号。

p::before {
  content: "★ ";
  color: #e67e22;
}

这里 content 是伪元素的灵魂。没有它，伪元素就不存在。它可以是文字、图片地址、也可以留空配合背景用。

::before 和 ::after

这两个最常用，一个在元素内容前面，一个在后面。

<style>
  .notice::before {
    content: "注意 ";
    font-weight: bold;
    color: #c0392b;
  }
  .price::after {
    content: " 元";
    font-size: 12px;
  }
</style>
<p class="notice">这里需要验证手机号。</p>
<p class="price">99</p>

::before 是元素的第一个子元素，::after 是最后一个。它们默认都是行内元素，想要设置宽高要先转成块级或弹性布局。

做装饰角标

伪元素最常用来画纯 CSS 的小装饰，不依赖图片。

<style>
  .tag {
    position: relative;
    display: inline-block;
    padding: 4px 12px;
    background: #3498db;
    color: #fff;
  }
  .tag::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #3498db;
    transform: rotate(45deg);
  }
</style>
<span class="tag">热销</span>

content: "" 留空，再用定位和旋转画出一个箭头一样的尖角。气泡提示、标签角标都用这个套路。

::first-line 和 ::first-letter

这两个针对文本，控制段落的第一行和第一个字。

p::first-line {
  font-weight: bold;
}
p::first-letter {
  font-size: 2em;
  color: #e67e22;
}

注意 ::first-line 只对块级容器的文本生效，它的宽度取决于容器，换行位置变了选中的行也跟着变。

::selection

控制用户用鼠标选中文字时的样式，很实用的小细节。

::selection {
  background: #ffeaa7;
  color: #2d3436;
}

选中任何文字都会变成黄色底黑字。只能设置颜色类属性，其他大部分属性不生效。

伪元素能配合哪些选择器

伪元素可以跟在任何选择器后面，比如类选择器、ID 选择器，也可以配合状态类伪类。

.btn::before {
  content: "→ ";
}
.btn:hover::before {
  content: "→→ ";
}

按钮悬停时箭头变多，互动感一下就出来了。

常见坑

第一，content 忘写，伪元素不显示。第二，伪元素不能作用于 img、input 这类替换元素，因为它们内部不产生内容。第三，一个元素可以同时用多个伪元素，但同一元素上同一个伪元素只能出现一次。

小结

伪元素通过 content 在元素内部再造内容，::before 和 ::after 做装饰，::first-line 和 ::first-letter 控文本，::selection 美化选中状态。它是纯 CSS 实现复杂效果的基础，下一篇开始讲 CSS 属性的值怎么用。