很多網站在設計欄目標題的時候，喜歡用下劃線分開欄目標題和內容部分。

而且線條左邊的部分往往還有顏色，且這個顏色跟標題的文字長短保持一致。效果如圖所示：

這種效果其實很簡單。

我這里給大家推薦兩種方式：

假定我們的標題部分 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感覺。