How to Use Before And After Classes For Website Design

Use of ::after
::after is a pseudo component which enables you to embed content onto a page from CSS (without it used to be in the HTML). While the final product isn't quite the DOM, it shows up on the page as though it is, and would basically be this way:

<div> 

<!- - text inside the div - > 

cards 

</div> 

div::after { 

content: "cards"; 

}

Use of ::before-

::before is the very same just it embeds the substance before some other substance in the HTML rather than after. The main motivations to utilize one over the other are:
You need the created substance to precede the component content, positionally. 

The ::after substance is additionally "after" in source-arrange, so it will position over ::previously whenever stacked over one another normally. 

The incentive for the substance can be:
A string: content: "a string"; - uncommon characters should be exceptionally encoded as a Unicode element. See the glyphs page. 

A picture: content: url(https://d2ozz7pa6o5n24.cloudfront.net/way/to/image.jpg); - The picture is embedded at its correct measurements and can't be resized. Since things like inclinations are real pictures, a pseudo component can be an angle. 

Not much: ""; - Useful for clearfix and embeddings pictures as foundation pictures (set width and stature, and can even resize with foundation measure). 

A counter: content: counter(li); - Really helpful for styling records until :marker tags along. 

Note that you can't embed HTML (in any event, that will be rendered as HTML). content: "<h1>nope</h1>";

#: vs ::

Each program that backings the twofold colon (::) CSS3 sentence structure likewise underpins only the (:) grammar, however, IE 8 just backings the single-colon, so for the time being, it's prescribed to simply utilize the single-colon for best program bolster. 

:: is the fresher configuration indented to recognize pseudo substance from pseudo selectors. On the off chance that you needn't bother with IE 8 bolster, don't hesitate to utilize the twofold colon. 

The most essential advantage of pseudo :after and :before components are that you are capable style your HTML without to include new DOM hubs. I extremely get a kick out of the chance to peruse perfect and semantic markup. CSS is the place for all the visual things and it is incredible that we have such an instrument. 

Breadcrumbs (route) using :before and :after 

Generally, when you do breadcrumbs you have connections and separator between them. Rather than including a component into the DOM, you could accomplish a similar impact with unadulterated css.

HTML:

<p>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Team</a>
</p>

Just a few lines of CSS:

a {
    text-decoration: none;
    font-weight: bold;
    color: #000;
}
a:after {
    content: " /";
}
a:first-child:before {
    content: " » ";
}
a:last-child:after {
    content: "";
}

Icons using :before and :after 

It is exceptionally well known to use :before or :after for showing a icon. Since you can include each CSS style property, you could make the recently made component a square one and join foundation picture.

HTML:

<p>paragraph text</p>

and CSS:

p:before {
    content: "";
    display: block;
    background: url("img.jpg") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}