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

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

方式一：通过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;//很重要，否则两条线不在同一水平面
}

页面效果：

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