CSS ::before and ::after examples

on Feb 5, 2016

CSS pseudo element ::before and ::after (CSS 2 syntax :before and :after) can be used to place some content before or after an element. Most browsers support the CSS3 syntax (::before and ::after) now. Here are some examples.

Basic ::before and ::after example

<style type="text/css" media="screen">
#id1 {background:lightgreen;}
#id1::before {
  content:"before text";
}
#id1::after {
  content:"after text";
}
</style>
<div id="id1">
Hello world.
<div>

refresh

try it online

::before and ::after example using display block and background color

<style type="text/css" media="screen">
#id1 {background:lightgreen;}
#id1::before {
  content:"before text";
  display:block;
  background-color:lightgray;
}
#id1::after {
  content:"after text";
  display:block;
  background-color:lightgray;
}
</style>
<div id="id1">
Hello world.
<div>

refresh

try it online