如何在动态文本末尾添加圆点标记且不挤占原有文字布局位置

你可以通过CSS伪元素实现末尾圆点，不需要额外插入独立的DOM节点，既能自动适配任意长度的动态文本，也不会占用额外布局空间挤压文字导致偏移。

代码示例 #

CSS 代码 #

.box{
  background-color: cornflowerblue;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  /* 可选：实现内容垂直居中 */
  align-items: center;
}
h3{
  text-align: center;
}
/* 文字末尾圆点样式 */
h3::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: blueviolet;
  /* 控制圆点和文字的间距 */
  margin-left: 8px;
  /* 可选：调整圆点垂直位置和文字对齐 */
  vertical-align: middle;
}

HTML 代码 #

<div class="box">
  <h3>A pretty long word here</h3>
</div>
<h3 id="test">Small word</h3>

<div class="box">
  <h3>Small word</h3>
</div>

实现说明 #

• 伪元素::after会自动跟随在h3标签的文本内容末尾，不管文本长度如何变化，圆点位置都会自动适配，不需要手动计算坐标
• 没有额外的同级DOM元素占用布局空间，因此两处「Small word」的水平起始位置会完全一致，不会出现偏移问题
• 如果需要单独控制某一个标题的圆点样式，给对应h3加专属类名单独覆盖样式即可

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