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