Question

我曾经能够通过遵循规则在hr元素之前和之后添加内容。但现在不行了！你可以告诉我是什么导致了这个问题吗？

.hr-title:before {
    content: "";
    width: 16px;
    height: 24px !important;
    background-color: gold;
    position: absolute;
    top: -7px;
    left: -1px;
}

.hr-title {
    position: relative;
    height: 1px;
    background-color: #d0d0d0;
    color: #ccc;
    border-top: 1px solid #ccc;
    margin: 0 auto;
    margin-top: -12px;
    margin-bottom: 30px;
    width: 50%;
}

.hr-title:after {
    content: "";
    width: 4px;
    height: 14px;
    background-color: #24A2C6;
    position: absolute;
    top: -7px;
    right: -1px;
}

<h2> Test </h2>
<hr class="hr-title">

Answer 1

您的代码似乎正常运行。 hr之前和之后的对象都被移动到7像素。

Answer 2

关于HTML <hr />规范的问题是所谓的void元素。伪类::before和::after不适用于void - 元素。因为这些元素的内容模型在任何情况下都不允许它拥有内容。您的示例仅适用于几个在此时忽略规范的浏览器。

您可以找到void元素here的列表。

Answer 3

您的代码是正确的，只需要在 .ht-title 类中添加此css overflow：visible; 属性，因为 hr 元素已经默认情况下溢出：隐藏。我希望这段代码会有所帮助。

.hr-title {
  position: relative;
  height: 1px;
  background-color: #d0d0d0;
  color: #ccc;
  border-top: 1px solid #ccc;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
  width: 50%;
  overflow: visible;
}
.hr-title:before {
  content: "";
  width: 16px;
  height: 14px;
  background-color: gold;
  position: absolute;
  top: -7px;
  left: -1px;
}
.hr-title:after{
  content: "";
  width: 4px;
  height: 14px;
  background-color: #24A2C6;
  position: absolute;
  top: -7px;
  right: -1px;
}

<h2>Test</h2>
<hr class="hr-title">

关于在内容之后添加到hr元素的问题

3 个答案: