[分享]css中文字下点线代码

CSS中文字下点线代码可以用于给文字添加下划线效果，并在下划线之下添加小圆点，优美且实用。具体代码如下：p { : relative; /设置定位为相对定位/ textdecoration: none...

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%;  /*设置小圆点为圆形*/
} 

这段代码就可以让你的文字下方出现一条下划线和一排小圆点，如下图所示：