巧用CSS伪元素，轻松实现div内垂直居中线条
本文将演示如何利用CSS伪元素在div容器内创建一条垂直居中的线条。
首先，需将目标div的定位设置为相对定位：position: relative;。这使得我们可以使用绝对定位的伪元素在div内部进行精确控制。
接下来，添加以下CSS代码，定义div的::after伪元素：
立即学习“前端免费学习笔记（深入）”；
div::after {
content: ''; /* 必须添加，否则伪元素不会显示 */
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px; /* 线宽 */
background-color: #000; /* 线颜色 */
transform: translateY(-50%); /* 垂直居中 */
}
代码详解：
-
content: '';这是伪元素的必要属性，用于指定伪元素的内容，此处为空。 -
position: absolute;将伪元素设置为绝对定位，相对于父元素(div)进行定位。 -
top: 50%;将伪元素的顶部位置设置为父元素高度的50%。 -
left: 0;将伪元素的左侧位置设置为父元素的左侧边缘。 -
width: 100%;设置伪元素的宽度为父元素的100%。 -
height: 1px;设置线条的高度为1像素。 -
background-color: #000;设置线条颜色为黑色。 -
transform: translateY(-50%);将伪元素垂直方向向上移动自身高度的50%，实现精确的垂直居中。
通过以上简单的CSS代码，即可在div容器内优雅地绘制一条垂直居中的线条。 您可以根据需要调整线条的宽度、颜色等属性。
