什么是竖线
竖线是一种CSS边框样式，也叫做竖杠边框，类似于文字后面的竖杠，常用于制作分割线或者在文本中突出某一行内容。
使用border实现竖线
使用实心边框
使用CSS的border属性可以实现各种边框样式。在border属性中，我们可以设置边框的宽度、颜色和样式。在实现竖线时，我们需要将边框的样式设置为实心，并将边框的宽度设置为0，边框的高度设置为需要的竖线长度，同时设置边框的颜色。
div {
border-left: 1px solid black;
height: 100px;
margin-left: 50px;
}
上述代码中，我们使用了border-left属性来设置左边框为实心线条，同时将边框的宽度设置为1像素，边框的样式设置为solid。我们还设置了边框的颜色为黑色，高度为100像素，以及一个50像素的左边距，以保证竖线距离左侧有一定的间距。
使用虚线边框
虚线边框同样可以用于实现竖线，只需要将边框的样式设置为dashed或dotted即可。
div {
border-left: 1px dashed black;
height: 100px;
margin-left: 50px;
}
上述代码中，我们将边框的样式设置为dashed，即为虚线，这样我们就可以得到一个虚线的竖线。
使用伪元素实现竖线
除了使用边框，我们还可以使用CSS的伪元素来实现竖线。伪元素是CSS提供的一种虚拟元素，可以在文档中添加额外的内容，进而实现一些特殊的效果，例如竖线。
使用:before伪元素实现竖线
使用:before伪元素可以在文本前面添加额外的内容，我们可以通过这种方式来实现竖线。可以将:before伪元素的content属性设置为空字符串，然后通过设置伪元素自身的宽度、高度、背景颜色等属性来实现竖线。
p:before {
content: "";
display: inline-block;
width: 1px;
height: 100%;
background-color: black;
margin-right: 10px;
}
上述代码中，我们使用:before伪元素在p元素前添加了一个竖线。我们设置了伪元素的content属性为空字符串，这样伪元素就不会添加任何文本内容；然后设置伪元素的display属性为inline-block，这样竖线就会在文本中占据一定宽度。接下来，我们设置了伪元素自身的宽度为1像素，高度为100%，背景颜色为黑色，这样就得到了一个高度为p元素高度的黑色竖线。最后，我们设置了一个右边距，以保证竖线与文本之间有一定的间距。
使用:after伪元素实现竖线
除了使用:before伪元素，我们还可以使用:after伪元素。与:before伪元素类似，:after伪元素可以在文本后添加额外的内容。同样可以设置伪元素自身的宽度、高度、背景颜色等属性来实现竖线。
p:after {
content: "";
display: inline-block;
width: 1px;
height: 100%;
background-color: black;
margin-left: 10px;
}
上述代码中，我们使用:after伪元素在p元素后添加了一个竖线。与:before伪元素类似，我们设置了伪元素的content属性为空字符串，这样伪元素就不会添加任何文本内容；然后设置伪元素的display属性为inline-block，这样竖线就会在文本中占据一定宽度。接下来，我们设置了伪元素自身的宽度为1像素，高度为100%，背景颜色为黑色，这样就得到了一个高度为p元素高度的黑色竖线。最后，我们设置了一个左边距，以保证竖线与文本之间有一定的间距。
小结
本文介绍了三种方法来实现竖线效果，分别为使用border属性、:before伪元素和:after伪元素。通过设置样式属性的不同，可以制作出不同类型的竖线效果，满足不同的需求。属性的具体使用方法可以参考上述代码示例。