一条线显示两种颜色的方法汇总

方式一：通过after的方法(比较好用)

这种方法的原理是：在元素本身添加一个内容，该内容高度为1px,颜色为需要的短线颜色，而长线则为元素的边界。然后通过定位的方式使两条线在同一高度。

下面给出示例：

元素的html结构：

<div class="block1">
    <h4>看我的下边界，有好看的线</h4>
</div>

元素的css样式

.block1 h4{
    padding-bottom: 7px