如何仅用CSS为指定表格单元格文本右侧添加填充矩形？

完全不需要修改HTML或JS，仅通过CSS的::after伪元素就能满足你的需求——在不改变原有文本外观和位置的前提下，在text1右侧（距离单元格左侧100px处）添加一个自定义宽度的填充矩形。

实现思路 #

利用CSS伪元素在目标单元格内容的后方插入一个装饰性元素，通过相对+绝对定位精确控制它的位置：

• 给#a1设置position: relative，为伪元素提供定位参考
• 使用::after伪元素创建空内容的矩形，通过绝对定位固定它的偏移量和尺寸
• 调整垂直对齐方式，让矩形和文本保持居中对齐

完整CSS代码示例 #

#a1 {
  position: relative; /* 建立定位上下文，确保伪元素相对于单元格定位 */
}

#a1::after {
  content: ''; /* 伪元素必须声明content，空字符串即可 */
  position: absolute;
  left: 100px; /* 距离单元格左侧的固定偏移量 */
  width: 40px; /* 自定义矩形宽度 */
  height: 1.2em; /* 匹配文本行高，保证垂直对齐 */
  background-color: #333; /* 填充颜色，可根据需求修改 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中于文本 */
}

效果说明 #

• 原有文本text1的位置和样式完全不受影响
• 矩形会固定显示在距离单元格左侧100px的位置，宽度为40px，和文本垂直居中对齐
• 可以通过修改background-color、height、left等属性，灵活调整矩形的颜色、高度和偏移位置

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