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

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

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

下面给出示例：

元素的html结构：

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

元素的css样式

.block1 h4{
    padding-bottom: 7px;
    border-bottom: 1px solid #ebebeb;
    position: relative;//绝对定位
}
.block1 h4:after{
    content: '';//注意内容为空
    width: 100px;
    height: 1px;
    background: #f00;
    position: absolute;
    left: 0;
    bottom: -1px;//关键步骤
}

页面效果为：

方式二：通过内嵌元素

第二种方式的原理：给外层元素高度为1px;并给定颜色；然后给内层元素一定的宽度，高度为1px，然后给定颜色。这种因为不同元素的边界不同，需要巧妙使用margin为负值的情况。
这种方法使用时要清边距：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

下面给出示例：

元素的html结构：

<div class="block2">
    <h4>看我的下边界，也有好看的线</h4>
    <p class="line">
        <span class="innerline"></span>
    </p>
</div>

元素的css样式：

.block2 h4{
    padding-bottom: 7px;
    border-bottom: 1px solid #ebebeb;
}
.line{
    height: 1px;//高度为1px,可根据实际修改
    width: 100px;
    background: #ebebeb;
}
.innerline{
    display: block;
    width: 100px;
    height: 1px;
    background: #f00;
    margin-top: -1px;//很重要，否则两条线不在同一水平面
}

页面效果：

暂时只想起这些，如有更好的方法，请大家提供，如有错误，恳请指正。