CSS3干货10：如何做一个板块标题水平线左边带颜色效果

很多网站在设计栏目标题的时候，喜欢用下划线分开栏目标题和内容部分。

而且线条左边的部分往往还有颜色，且这个颜色跟标题的文字长短保持一致。效果如图所示：

这种效果其实很简单。

我这里给大家推荐两种方式：

假定我们的标题部分 HTML 结构如下：

<h1>
    <span>热点新闻</span>
</h1>

方式一：利用下边框。灰色部分是 h1 的下边框，蓝色部分是 span 标签的下边框。

h1 {
    width: 300px;
    height: 40px;
    border-bottom: 2px #eee solid;
    line-height: 40px;
}

h1 span {
    float: left;
    display: block;
    height: 40px;
    font-size: 18px;
    border-bottom: 2px #0000ff solid;
}

h1 的高度为 40px，span 也设置它的高度为 40px。这样，span 的下边框会超出 40px 的高度，刚好可以把 h1 灰色边框覆盖住。

方式二：可以利用 伪标签 完成。 灰色 是 h1 的伪标签制作的，蓝色 是span 的伪标签制作的。伪标签通过绝对定位的方式放到指定的位置。

h1 {
        width: 300px;
        height: 40px;
        line-height: 40px;
        position: relative;
    }

    h1 span {
        float: left;
        display: block;
        height: 40px;
        font-size: 18px;
        position: relative;
        z-index: 1;
    }

    h1 span::after {
        content: "";
        display: block;
        height: 2px;
        background: #00f;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
    }

    h1::after {
        content: "";
        display: block;
        height: 2px;
        background: #eee;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
    }

效果一样。

方式三：当然就是切图了。这个就不贴代码了，太low感觉。