The ::before and ::after pseudo-elements in CSS allows you to insert content on a page or section without having a HTML structure. The html structure will looks like this:

<!-- html structure for pesudo element -->
<div>
  before
  <!-- existing elements will be inside the div -->
  after
</div>

The value for content can be string, image, counter, Nothing (Empty) etc. Here is few example:

<!-- css for pseudo element -->
<!-- image content -->
h1::after {
  content: url(/path/smiley.jpg);
}

<!-- Heading content -->
div::before {
  content: "<h1>This is Heading 1</h1>";
}

<!-- Empty content -->
div::before {
  content: " ";
}

<!-- Element first line -->
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}