从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式

最近在模仿做一个静态的PC版知乎，在模仿的过程中，从知乎工程师的方法中学到了不少知识，比如CSS方面的，以下介绍一个今天学到的伪元素的技巧。

示例

DOM结构为：

<div class="home-entry-box relative clearfix">
  <span class="home-entry-box-arrow"></span>
  <ul class="pull-left">
    <li class="home-entry-item inline-block relative">
      <a>
        <i class="sprite-home-icon-question-off"></i>
        <span>提问</span>
      </a>
    </li>
    <li class="home-entry-item inline-block relative">
      <a>
        <i class="sprite-home-icon-answer-off"></i>
        <span>回答</span>
      </a>
    </li>
    <li class="home-entry-item inline-block relative">
      <a>
        <i class="sprite-home-icon-post-off"></i>
        <span>写文章</span>
      </a>
    </li>
  </ul>
  <a class="pull-right"><span class="draft">草稿</span></a>
</div>

在这个示例中，标注了两处，第一处是一个装饰之类的东西，这个装饰让整个用户操作导航条好看了不少；第二处是项与项之间的分隔装饰。（为了命名方便，后文中第一处叫做对话修饰，第二处叫做分隔修饰）

实现

分隔修饰: 由于分隔修饰比对话修饰更简单一些，所以先说下分隔修饰的实现。一般情况下，我会想到用border-right去实现这个效果，但这有个问题，效果中这个修饰的高度既不是每一项的高度，也不是每一项的内容的高度，因此用border是不太好处理的，并且也不太方便定位的控制。在这里，可以使用伪元素，将每一项(li.home-entry-item)设置为position: relative，之后每一项加一个伪元素，决定定位来实现分隔修饰的效果，代码为：

.home-entry-item:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 20px;
  left: 0;
  top: 50%;
  margin-top: -10px;
  background: #f0f0f0;
}

这样，既实现了高度的控制，又实现了定位的控制。

对话修饰: 这是一个直角三角形，刚开始看到的时候，我以为是一个图片做的小图标，后来审查了一下，发现是巧妙地利用了伪元素做出来的。学习了CSS的同学应该都接触过一个经典例子吧，就是画三角形，思路是将一个元素宽高都设置为0，之后控制三个方向的border为透明，再控制最后一个方向的border即可。另外还可以通过控制不同方向border的宽度来实现不同形状的三角形。

这里我们就可以利用伪元素来画这个三角形，不过仔细看的话，会发现示例中的三角形还是一个有边框的三角形，这也是我一开始以为是图片做的图标的原因。后来看了一下知乎的工程师的处理方式，发现自己CSS的使用和创造力还有很多要学习的地方。解决办法是：每个元素正好有两个伪元素，只要再利用一个伪元素画一个三角形，再把两个伪元素画的三角形叠加起来就可以了。其中一个三角形要比另一个小1px的宽高。

示例中的完成方案是通过伪元素画两个等边三角形，其中一个比另一个的border-width小1px，并且垂直距离多偏移1px，水平距离多偏移2px(这样才能让大的三角形包住小的三角形，形成类似边框的效果)，之后设置span.home-entry-box-arrow为overflow: hidden; 截去三角形多余的部分，形成直角三角形，这样比直接画直角三角形更省事。代码如下：

.home-entry-box-arrow {
  position: absolute;
  top: 10px;
  left: -10px;
  width: 10px;
  height: 10px;
  overflow: hidden;
}
.home-entry-box-arrow:before,
.home-entry-box-arrow:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: solid transparent;
}
.home-entry-box-arrow:before {
  border-top-color: #f0f0f0;
  border-width: 14px;
  top: 0;
  left: 0;
}
.home-entry-box-arrow:after {
  border-top-color: #fafafa;
  border-width: 13px;
  top: 1px;
  left: 2px;
}

总结

利用伪元素，可以实现很多装饰效果，善于利用可以写出更好的CSS以及免去不必要的表现型的HTML