vzupo vzupo - 3 months ago 13
CSS Question

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

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

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>

Comments