HR标签分隔线遮罩表情上半部分的CSS问题解决需求

问题原因 #

你的hr用了border-top: medium double，这条双线是绘制在hr元素内部的，而hr:after伪元素默认是透明背景，所以线条会透过来挡住表情上半部分。之前你试的背景色可能没匹配页面实际背景，或者top值没调到位。

修复后的CSS代码 #

hr {
  width: 100%;
  margin: 5em 0;
  padding: 0;
  border: none;
  border-top: medium double #E3E3E1;
  text-align: center;
  /* 删掉color属性，线条颜色已经用border-top设置好了 */
}

hr:after {
  content: "˗ˏˋ☕ˎˊ˗";
  display: inline-block;
  position: relative;
  font-size: 25px;
  padding: 0 10px;
  /* 微调top值，让表情完全居中覆盖线条 */
  top: -0.8em;
  /* 必须加和页面背景一致的颜色，彻底挡住下方的双线 */
  background-color: #ffffff; /* 替换成你页面的实际背景色 */
  /* 可选：添加line-height让表情垂直对齐更自然 */
  line-height: 1;
}

关键调整说明 #

• 背景色是核心：给伪元素加和页面主体一样的背景色，就能完全覆盖hr的边框线，不会再出现穿透遮挡的情况。
• 微调top值：把top: -0.7em改成-0.8em（可根据字体大小再微调），确保表情上下都不会被线条碰到。
• 清理冗余属性：hr里的color属性没用，删掉避免混淆。

无障碍保障 #

表情放在CSS的content里，屏幕阅读器不会读取它，完全满足你要的无障碍需求，不会出现重复读内容的问题。

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