css의 "selector"다음에 br 태그를 어떻게 추가 할 수 있습니까?

Question

텍스트를 표시하려면 css after :: selecter를 사용하고 있습니다. 원하는 것은 단순히이 디스플레이 앞에
태그를 추가하는 것입니다. 칸트는

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>

그것이

을하는 데 도움이 또는 당신이 정말로 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>

을 포함 할 경우 JQ를 사용할 수 있는지 알려주세요

Answer 2

":: after"를 새로운 줄로 나눌 생각이라면 왜 "display : block"규칙을 추가하지 않을까요?

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