多行文本虚线分割线

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>
<!-------------多行文本分割线---------------->