:before vs ::before & :after vs ::after

::before and ::after are pseudo-elements, and with CSS3 the use of two semicolons became the standard to differentiate between pseudo-elements and pseudo-classes. Browsers still all support the old syntax with one semicolon. Only IE8 doesn't support the new syntax.

The following two snippets are equivalent, with the first being the modern CSS3 implementation and the second being the obsolete CSS2 implementation, which you'll still need to use if you want to support IE8:

.bar::before {
  content: "foo";
}
.bar:before {
  content: "foo";
}

👉 You probaly don't need to support IE8. Just use ::before and ::after will you!

Search

🔎 Searching...