加顏色到水平線是一個(gè)簡(jiǎn)單而有效的方法來提高網(wǎng)頁的視覺吸引力和可讀性。在 CSS 中，你可以使用偽元素和 border 屬性來給水平線設(shè)置顏色。

/* 使用偽元素和 border 屬性給水平線加顏色 */
hr {
border: none;
border-top: 2px solid #ccc;
position: relative;
}
hr:before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 100px;
height: 2px;
background-color: #ff0000;
}

上面的 CSS 代碼中，我們首先用 border:none; 把水平線的默認(rèn)邊框清空。然后，使用 border-top 屬性來定義水平線的上邊框，并將它設(shè)置為 2px 的實(shí)線，顏色為 #ccc。

接下來，使用偽元素 :before 來創(chuàng)建一個(gè)絕對(duì)定位的元素，在水平線的頂部與左側(cè)開始，寬度為 100px，高度為 2px，顏色為 #ff0000。這樣就可以給水平線添加顏色了。如果要改變顏色，直接將 background-color 屬性修改為你希望的顏色。