1. 通过伪元素实现
.line::after {
content: '';
display: block;
margin: 0 auto;
width: 80%;
border-bottom: 1px solid #000;
}首先，大家通过CSS选择器选中要添加横线的元素，这里大家选用class为“line”的元素，然后通过“::after”伪元素添加一个空的块。大家把这个块设置为“display: block”让它成为了一个独立的块元素，在这个块中，大家设置了一个盒子的大小，横线的宽度为80%，并让它对齐，使其居中显示。最后，大家将横线设置为1像素宽，颜色为黑色。
2. 通过盒子模型实现
.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;
}这种方法是通过给元素设置“padding”来延伸横线，然后用伪元素创建了一个小的盒子，作为线条的延伸。首先，大家对选中的元素设置了边框，并给它设置了一些填充。这里大家还设置了一个相对位置以便后面的元素定位。接下来，大家使用“::before”伪元素创建了一个小盒子，这个盒子定位为绝对位置，位于父元素的底部（即延长线条）。最后，大家将这个盒子水平居中，并在下面添加了一些距离以保证横线不会连接到文本下面。
3. 通过伪类实现
.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”伪元素作为横线的延伸，然后通过设置“z-index”将它放到父元素的后面。首先，大家要将选中的元素相对定位，同时也需要给它底部一定的填充。然后，大家使用“::after”伪元素来添加横线，设置它的宽度和高度，颜色、位置、居中，最后设置“z-index”为-1，这是为了确保横线始终在父元素之后，并且不遮盖其他元素。