如何在「選擇器之後」在css中添加br標籤？

Question

我在:: selecter之後使用css來顯示文本。我想要做的只是在此顯示之前添加一個
標籤。不能讓它工作

H2::after { 
 
    content: " <br>posted by me"; 
 
    font-size: 14px; 
 
}

<H2>Hello</H2>

Answer 1

不能添加內部僞元素的content:"" html標籤。

在:after上使用display:block僞元素，你將得到想要的結果。見下圖：

H2::after { 
 
    content:"posted by me"; 
 
    display:block; 
 
    font-size: 14px; 
 
}

<H2>Hello</H2>

讓我知道，如果它可以幫助

或者你可以使用JQ如果你真的想包含HTML標記

$("h2").after("<span style='color:red;font-style:italic'>posted by me</span>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<H2>Hello</H2>

Answer 2

如果您打算將「:: after」打破爲新行，爲什麼不添加「display：block」規則？

h2::after{ 
    content:"posted by me"; 
    font-size:14px; 
    display:block; 
}