CSS 可以讓網站頁面變得更加美觀和炫酷。其中一個常見的 CSS 特效，就是橫線特效。這種特效可以為網站頁面帶來更加醒目的標題和分段效果。

下面是使用 CSS 實現橫線特效的基礎代碼。使用

<hr>

標簽可以實現默認的橫線，但這樣的橫線并不夠吸引人。如果想要讓橫線更加炫酷，可以通過下面的 CSS 樣式進行調整。

hr {
color: #eee;
background-color: #eee;
height: 1px;
border: none;
margin: 20px 0 20px 0;
}
hr:before {
content: "";
display: inline-block;
width: 250px;
margin-left: 10px;
border-top: 1px solid #eee;
}
hr:after {
content: "";
display: inline-block;
width: 250px;
margin-right: 10px;
border-top: 1px solid #eee;
}

其中，

hr { }

表示對 hr 標簽進行樣式設定，包括顏色、背景色、粗細等等。而

hr:before { }

和

hr:after { }

則表示在 hr 標簽前面和后面添加一個虛擬元素，并設定其樣式。這樣一來，就可以自定義橫線的顏色、寬度和位置，以達到更加炫酷的效果。

除了這種基礎的橫線特效外，還有一些更加高級的特效，比如使用 SVG 圖形實現動態橫線、使用偽元素和過渡動畫實現漸變橫線等等。網頁設計人員可以嘗試不同的方案，找到最適合自己網站的橫線特效。