HR（水平分割線）在網站設計中很常見，但默認的樣式可能并不總是適合每個項目。利用CSS可以輕松地修改HR的樣式，滿足自己的需求，下面我們就來看看如何使用CSS修改HR樣式。

/* 橫線 */
hr {
height: 2px; /* 高度 */
margin: 10px 0; /* 上下間距 */
background-color: #d8d8d8; /* 背景顏色 */
border: none; /* 去除邊框 */
}
/* 虛線 */
hr.dashed {
border-top: 1px dashed #999; /* 1像素虛線，顏色為#999 */
}
/* 雙線 */
hr.double {
border-top: 3px double #333; /* 3像素雙線，顏色為#333 */
}
/* 點線 */
hr.dotted {
border-top: 2px dotted #ccc; /* 2像素點線，顏色為#ccc */
}

通過以上CSS樣式，我們可以修改HR的高度、背景顏色、上下間距等等，同時實現虛線、雙線、點線的不同效果。另外，如果想要給HR添加文字或圖標等圖案，可以給HR添加偽元素實現。

/* 給HR添加箭頭 */
hr:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 8px solid transparent; /* 上方為空 */
border-bottom: 8px solid transparent; /* 下方為空 */
border-right: 8px solid #333; /* 右方為實線，顏色為#333 */
position: absolute;
top: 50%;
margin-top: -8px; /* 箭頭上下居中 */
right: 100%; /* 箭頭居HR右側 */
}

以上代碼為HR添加了箭頭，箭頭的大小和顏色可以根據自己的需求進行修改。