最近在模仿做一个静态的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