CSS中文字下点线代码可以用于给文字添加下划线效果,并在下划线之下添加小圆点,优美且实用。具体代码如下:p { position: relative; /*设置定位为相对定位*/ text-decor
CSS中文字下点线代码可以用于给文字添加下划线效果,并在下划线之下添加小圆点,优美且实用。具体代码如下:
p { position: relative; /*设置定位为相对定位*/ text-decoration: none; /*取消默认下划线*/ } p::after { display: block; /*将伪元素设置为块级元素*/ content: '; /*伪元素的内容为空*/ height: 1px; /*下划线高度*/ width: 100%; /*下划线宽度*/ background-color: #000; /*下划线颜色*/ position: absolute; /*绝对定位*/ bottom: -3px; /*设置下划线距离文字底部的距离*/ left: 0; /*设置左边距为0*/ } p::before { display: block; /*将伪元素设置为块级元素*/ content: '; /*伪元素的内容为空*/ height: 5px; /*小圆点高度*/ width: 5px; /*小圆点宽度*/ background-color: #000; /*小圆点颜色*/ position: absolute; /*绝对定位*/ bottom: -5px; /*设置小圆点距离文字底部的距离*/ left: 0; /*设置左边距为0*/ border-radius: 50%; /*设置小圆点为圆形*/ }
这段代码就可以让你的文字下方出现一条下划线和一排小圆点,如下图所示:
粉丝
0
关注
0
收藏
0