在HTML表單中，經常需要用到橫線進行分隔。之前我們可能使用了img標簽，來插入一張橫線圖片，但是這樣代碼量較大，而且加載速度比較慢。現在，我們可以使用CSS來插入橫線，使代碼更加簡潔，同時提高了頁面加載速度。

下面是一種使用CSS插入橫線的方法：

<style>
.hr {
height: 1px;
background-color: gray;
margin: 10px 0;
}
</style>
<div class="hr"></div>

上面的代碼中，我們首先定義了一個名為“hr”的class，該類設置了橫線的高度為1像素，背景顏色為灰色，以及上下margin為10像素。接下來，在我們需要插入橫線的地方，我們使用一個div標簽，并給它使用了“hr”類名。

除了使用div標簽來插入橫線外，我們還可以使用偽元素來實現橫線的效果：

<style>
.hr {
position: relative;
padding-top: 15px;
}
.hr::after {
content: "";
display: block;
height: 1px;
width: 100%;
background-color: gray;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class="hr"></div>

上面的代碼中，我們同樣定義了一個名為“hr”的class，該類定義了一個相對定位的div標簽，并設置了padding-top為15像素。接下來，我們使用了::after偽元素，并為它設置了內容為空，寬度為100%，高度為1像素，背景顏色為灰色，絕對定位，垂直居中。最后，在我們需要插入橫線的地方，我們同樣使用一個div標簽，并給它使用了“hr”類名。

這么使用CSS插入橫線，相比使用圖片插入橫線，不僅代碼清晰易懂，修改起來也更加方便。同時，橫線也可以根據實際需求進行樣式的修改，如修改顏色、高度等等。