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>
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>
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>
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;
}