CSS中可以通過很多方法來實現(xiàn)延長橫線的效果。下面我們將介紹三種不同的實現(xiàn)方法。

1. 通過偽元素實現(xiàn)

.line::after {
content: '';
display: block;
margin: 0 auto;
width: 80%;
border-bottom: 1px solid #000;
}

首先，我們通過CSS選擇器選中要添加橫線的元素，這里我們選用class為“l(fā)ine”的元素，然后通過“::after”偽元素添加一個空的塊。我們把這個塊設(shè)置為“display: block”讓它成為了一個獨立的塊元素，在這個塊中，我們設(shè)置了一個盒子的大小，橫線的寬度為80%，并讓它對齊，使其居中顯示。最后，我們將橫線設(shè)置為1像素寬，顏色為黑色。

2. 通過盒子模型實現(xiàn)

.line {
border-bottom: 1px solid #000;
padding: 10px;
margin-bottom: 20px;
position: relative;
}
.line::before {
content: '';
position: absolute;
width: 20px;
height: 1px;
background-color: #000;
bottom: -1px;
left: 50%;
margin-left: -10px;
}

這種方法是通過給元素設(shè)置“padding”來延伸橫線，然后用偽元素創(chuàng)建了一個小的盒子，作為線條的延伸。首先，我們對選中的元素設(shè)置了邊框，并給它設(shè)置了一些填充。這里我們還設(shè)置了一個相對位置以便后面的元素定位。接下來，我們使用“::before”偽元素創(chuàng)建了一個小盒子，這個盒子定位為絕對位置，位于父元素的底部（即延長線條）。最后，我們將這個盒子水平居中，并在下面添加了一些距離以保證橫線不會連接到文本下面。

3. 通過偽類實現(xiàn)

.line {
position: relative;
padding-bottom: 10px;
}
.line::after {
content: '';
display: block;
width: 60%;
height: 1px;
background-color: #000;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: -1;
}

這種方法使用“::after”偽元素作為橫線的延伸，然后通過設(shè)置“z-index”將它放到父元素的后面。首先，我們要將選中的元素相對定位，同時也需要給它底部一定的填充。然后，我們使用“::after”偽元素來添加橫線，設(shè)置它的寬度和高度，顏色、位置、居中，最后設(shè)置“z-index”為-1，這是為了確保橫線始終在父元素之后，并且不遮蓋其他元素。