如何使用::after伪元素在标题上方实现带方块的水平线

解决方案 #

要通过::after伪元素实现目标效果，调整定位、尺寸和边框属性即可：

* {
  box-sizing: border-box;
}

.over-line {
  font-family: sans-serif;
  text-align: left;
  text-transform: uppercase;
  margin-top: 6rem;
  display: inline-block;
  position: relative;
  /* 给文字加顶部内边距，避免被伪元素覆盖 */
  padding-top: 1.5rem;
}

.over-line::after {
  content: "";
  position: absolute;
  top: 0;
  height: 20px; /* 匹配原inner的高度（41px的50%） */
  width: 122px; /* 和原container宽度一致 */
  left: -40px; /* 向左偏移40px，对齐原效果 */
  background-color: red; /* 替换为目标红色 */
  border-right: 20px solid black; /* 保留原黑色方块宽度 */
}

<div class="over-line">Projects</div>

核心调整说明 #

• 向左偏移：将left设为负数（-40px），让伪元素向左超出父元素范围，和嵌套div的效果完全对齐。
• 缩小方块：直接修改border-right的宽度就能控制黑色方块大小；同时调整height和width匹配原效果的尺寸。
• 布局优化：把top设为0，配合父元素的padding-top避免文字被伪元素遮挡，布局更合理。

如果需要响应式效果，也可以用calc()计算宽度，比如width: calc(100% + 40px)，让伪元素宽度随文字长度自适应。

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