段落断线隐藏了我想要的一半表情符号在中间

Question

我想在中间插入一个表情符号，但它一直只显示表情符号的下半部分。上半部分隐藏在 hr 标签线后面 ()。

这是我的CSS：

hr {
  width: 100%;
  margin: 5em 0em 5em 0em;
  padding: 0;
  border: none;
  border-top: medium double #E3E3E1;
  color: #675757;
  text-align: center;
}

hr:after {
  content: "˗ˏˋ☕ˎˊ˗";
  display: inline-block;
  position: relative;
  font-size: 25px;
  padding: 0 10px;
  top: -0.7em;
}

我希望它看起来像（用ms Paint制作，哈哈）

在后面的部分我尝试了这些：

• 将显示更改为“阻止”

• 在后半部分添加背景颜色，但仍然只显示下半部分。

• 添加背景颜色：透明

• 添加“边框：0;”

• 添加“z-index：1;”

在人力资源部分我尝试了这些：

• 去除颜色

所有这些解决方案都导致与上面的屏幕截图相同的结果：上半部分隐藏在线条后面。为什么？

可能是我没有使用上述解决方案的正确组合。我对 CSS 的了解还不够了解。

编辑：注意到我的问题已关闭，因为有类似的问题。不过，这个问题的答案都指向 H2 解决方案，我将表情符号放在 HTML/文本中。有没有办法把表情符号放在CSS中？ 原因是：我希望屏幕阅读器可以访问它，它们可以理解 HR 标签，但每次都会尝试读出 HTML，这很烦人。

Answer 1

你可以尝试：

hr {
  width: 100%;
  margin: 5em 0em 5em 0em;
  padding: 0;
  border: none;
  border-top: medium double #E3E3E1;
  color: #675757;
  text-align: center;
  overflow: visible;
  position: relative;
}

hr:before {
  content: "˗ˏˋ☕ˎˊ˗";
  display: inline-block;
  position: absolute;
  font-size: 25px;
  padding: 0 10px;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
}

<p>
  This is a paragraph of text. There will be a custom styled horizontal rule below this paragraph with an emoji in the middle.
</p>

<hr>

<p>
  Here's another paragraph of text. The custom horizontal rule above should have an emoji in the middle without being cut off.
</p>