css下划线向下移点

CSS下划线向下移点是一种常见的文字装饰方法，可以在文本下方添加一条水平线，并在线的下方加入一个点以达到美观的效果。下面介绍一种简单的实现方法。

text-decoration: none;
border-bottom: 1px solid #ccc;
position: relative; 

上述代码实现了去除文本装饰线、添加下划线、将文本位置设为相对定位。

&:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ccc;
  border-radius: 10px;
} 

上述代码实现了添加向下偏移的点，通过为文本添加伪元素实现。伪元素的content属性为空，使文本既没有内容又有了对应的伪元素，display:block使其成为块元素，position:absolute将其设为绝对定位，bottom:-2px将其向下偏移2px，left:0为相对位置，width：100%和height：2px设置其样式为水平的条形图。background-color可以设置其背景色，但是需要根据实际情况进行调整。border-radius:10px实现线条末端的圆角效果。

这样一个简单的CSS下划线向下移点的效果就实现了。需要注意的是，其中的像素值需要根据实际情况进行微调，以达到最佳的显示效果。