Posted by Vikas Pundir | Last Updated: 15-Jan-19
of : :after
:afteris a pseudo componentwhich 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:
Use of ::before-
:beforeis 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 substanceis additionally "after" in source-arrange, so it will position over : :previouslywhenever 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(/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.
""; - Useful for clearfixand 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 : components are that you are before 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. capable
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
using : before and : after
It is exceptionally well known to
use : before or : for showing after a icon. Since you can include each CSS style property, you could make the recently made component a square one and join foundation picture.