CSS 是一種非常重要的前端開發技術，可以幫助我們對頁面進行靈活的樣式定制。其中，橫虛線是頁面中經常用到的一種效果，下面我將介紹如何使用 CSS 添加橫虛線。

<style>
.underline {
text-decoration: none;
position: relative;
}
.underline::before {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: #000;
z-index: -1;
}
.underline.dashed::before {
border-bottom: 1px dashed #000;
}
</style>

以上是添加橫虛線的 CSS 代碼。其中，我們通過給文本的父元素添加position: relative;屬性，然后在其子元素中添加::before偽元素，并設置它的position: absolute;、width: 100%;和height: 1px;，表示讓該偽元素覆蓋在文本下方，寬度為父元素的寬度，高度為 1 像素，即形成一條橫線。我們還可以通過更改background-color屬性來改變橫線的顏色。

如果要將橫線設置為虛線，可以將background-color屬性改為border-bottom: 1px dashed #000;。

通過以上的 CSS 代碼，我們可以輕松地添加橫虛線效果，讓頁面更加美觀和實用。