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

以前我可以通过以下规则在hr元素之前和之后添加内容。但它现在不工作！你能否让我知道是什么导致了这个问题？关于将内容添加到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">

来源

2017-10-08 JJ BOBO

你的代码似乎正常工作。 hr之前和之后的对象都被移动到7 px。

来源

2017-10-08 23:09:44 MK87

问题是关于HTML <hr />的规范是所谓的void元素。伪类::before和::after不适用于void -elements。因为那些元素的内容模型在任何情况下都不允许它拥有内容。你的例子只能在几个浏览器中工作，这些浏览器在那个时候会忽略规范。

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

来源

2017-10-08 23:18:27 cyrix

您的代码是正确的只需要添加此css 溢出：可见;财产.ht标题类因为小时元素已默认溢出：隐藏。我希望这个片段会有所帮助。

.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">

来源

2017-10-09 05:17:32

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

回答

相关问题