How can I add a br tag inside of css "after" selector?

Question

I am using the css after:: selecter to display texts. What I want to do is simply add a
tag before this display. Cant get it to work

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

<H2>Hello</H2>

Answer 1

you cannot add html tags inside content:"" of pseudo-element.

use display:block on the :after pseudo-element and you will get the desired result . see below :

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

<H2>Hello</H2>

let me know if it helps

or you could use JQ if you REALLY want to include HTML tags

$("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

If you're looking to break the "::after" onto a new line why not add a "display:block" rule?

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