Professional CSS3

Pseudoelements

Using pseudoelements is really important to omit repeatable code elements that need specific HTML code. The main purpose of pseudoelements is to reduce DOM elements in the HTML code.

What is :before and :after?

:before and :after are pseudoelements that you can add to an HTML element. An element is added as an inline element into a selected element. To get the foundation of before and after pseudoelements, you can draw the HTML code as follows:

<a>Element</a>

And append the SASS code as follows:

a
  border: 1px solid #000

  &:before
    content: 'before'
    color: orange

  &:after
    content: 'after'
    color: orange

Compiled CSS:

a {
    border: 1px solid #000;
}

a:before {
    content: "before";
    color: orange;
}

a:after {
    content: "after";
    color: orange;
}

The ...