關於將內容添加到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元素之後的問題

回答

相關問題