1

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>
vzupo
  • 235
  • 4
  • 11

2 Answers2

0

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>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
0

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