網(wǎng)頁設(shè)計(jì)中，圖文混排是一種非常常見的頁面布局方式。而在圖文混排時(shí)，我們經(jīng)常需要使用到橫線來分隔不同的內(nèi)容區(qū)域。在CSS中，我們可以很方便地使用border屬性來給元素增加一條橫線。

/* CSS代碼示例 */
hr {
border: none;
border-top: 1px solid #ccc;
margin-top: 20px;
margin-bottom: 20px;
}

上述CSS代碼可以將hr元素的上邊框設(shè)置為1像素的實(shí)線，并設(shè)置頂部和底部的外邊距為20像素。如果我們想要設(shè)置虛線或點(diǎn)線，只需要將border-top改為border-top-style并設(shè)置相應(yīng)的樣式即可：

/* CSS代碼示例 */
hr {
border: none;
border-top-style: dotted;
border-top-width: 1px;
margin-top: 20px;
margin-bottom: 20px;
}

同樣地，我們也可以給文本元素添加一條橫線。這時(shí)候，我們需要將文本元素設(shè)置為行內(nèi)元素，并為其添加一個(gè)下劃線文本裝飾線。

/* CSS代碼示例 */
p {
display: inline;
text-decoration: underline;
}

上述代碼可以將所有段落元素設(shè)置為行內(nèi)元素，并添加下劃線文本裝飾線。如果我們只想要添加一個(gè)橫線，可以選擇使用:before偽元素：

/* CSS代碼示例 */
p:before {
content: "";
display: inline-block;
width: 100%;
border-bottom: 1px solid #ccc;
margin-right: 10px;
}

上述代碼可以給所有段落元素的前面添加一條1像素實(shí)線。其中，before偽元素的content必須設(shè)為空字符串，否則將不會(huì)顯示。