如何用CSS实现带左侧内边距且末尾带圆点的彩色文本下划线

可以通过以下代码实现需求中的样式：

CSS 代码 #

.underline {
  text-decoration: underline;
  text-underline-offset: 10px; /* 控制下划线与文本的垂直距离 */
  display: inline-block;
  position: relative;
  padding: 20px 0px; /* 上下内边距，如需左侧空白可添加 padding-left */
  color: #2af6ff; /* 统一文本、下划线和圆点的颜色 */
}

.underline::before {
  transform: translateX(-50%); /* 让圆点水平居中对齐下划线末端 */
  border-radius: 100%; /* 把元素设为圆形 */
  position: absolute;
  background: #2af6ff; /* 圆点颜色与下划线保持一致 */
  bottom: 10px; /* 让圆点与下划线处于同一垂直位置 */
  height: 10px;
  content: '';
  width: 10px;
  left: 100%; /* 将圆点定位到文本的最右侧 */
}

HTML 代码 #

<div class="h3 fw-bolder mt-4 px-5"><span class="underline">Summary</span></div>

如果需要调整下划线左侧的空格/内边距，直接给.underline类添加padding-left属性即可，比如padding-left: 15px;就能快速实现左侧空白效果。

内容的提问来源于stack exchange，提问作者William