多行文本虚线分割线
AAA
BBB
CCC
DDD
EEE
FFF
GGG
细节美化:
如果设置为不显示最后一行的虚线,那么把代码
.my-text-container p::after {
换成:
.my-text-container p:not(:last-child)::after {
即可。
HTML代码:
<div class="my-text-container"> <p>AAA</p> <p>BBB</p> <p>CCC</p> <p>DDD</p> <p>EEE</p> <p>FFF</p> <p>GGG</p> </div>
CSS代码:
<!-------------多行文本分割线----------------> <style> .my-text-container p { margin: 0; /* 去除默认外边距 */ line-height: 40px; /* 设置行高,以及行与行之间的间距 */ position: relative; /* 设置相对定位,以便后面的伪元素进行绝对定位 */ } .my-text-container p::after { content: ""; /* 添加空内容 */ position: absolute; /* 设置绝对定位 */ bottom: 0; /* 对齐底部 */ left: 0; /* 对齐左边缘 */ width: 95%; /* 设置宽度与文字宽度一致 */ border-bottom: 1px dashed #ccc; /* 设置虚线样式 */ } </style> <!-------------多行文本分割线---------------->