CSS技巧 | 善用::after伪元素添加装饰性内容

概念

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

注意：

::after表示法是在CSS 3中引入的，::符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法:after。

使用举例

假设有一个导航栏，当前被选中的元素会显示一个红色短线，如下图所示：

image.png

• 传统的写法可能是这样：
  （即用一个额外的div标签，加上一定的样式去实现红色短线的效果。）

<!-- html -->
<ul>
  <li>
    nav 1
    <div class="active-line"></div>
  </li>

  <li>
    nav 2
    <div class=""></div>
  </li> 

  <li>
    nav 3
    <div class=""></div>
  </li>

  <li>
    nav 4
    <div class=""></div>
  </li>
</ul>

/* css */
ul {
  margin: 0;
  padding: 0;
  display: flex;
  width: 50%;
  height: 50px;
  list-style: none;
}
li {
  position: relative;
  flex: 1;
  height: 100%;
  line-height: 50px;
  text-align: center;
  background: #eee;
  border: .5px solid #ccc;
  box-sizing: border-box;
}
.active-line {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translate(-50%);
  width: 20%;
  height: 3px;
  background: red;
}

这种方法的问题在于：增加了页面中无实际内容的节点，不利于语义化；同时也增加了DOM节点的嵌套，降低了页面渲染性能。

• 使用::after伪元素改进后的写法是这样：

<!-- html -->
<ul>
  <li class="active">nav 1</li>
  <li>nav 2</li>  
  <li>nav 3</li>  
  <li>nav 4</li> 
</ul>

/* css */
.active::after {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translate(-50%);
  content: '';
  width: 20%;
  height: 3px;
  background: red;
}

可以看到，改进后的写法，DOM结构简化、清晰了很多，装饰性内容与页面表现分离，效果却并无二致。