::before And ::after in CSS

css ::before & ::after

In CSS before and after are the pseudo elements. These are use when we have to insert some content without the help of HTML.

The result of this CSS code will affect on the browser page but not in DOM. So many times this property is used

Content of ::before and ::after

html content is insert in the page by using content keyword

Before and After Code Demonstration

From the above example:-

Imagine we have a html paragraph element <p>all</p>. And we have to insert some content before and after this paragraph. Then given code will help you.

p :: before{ content : “hi”}

p :: after{content: “learner”}

Value of content can be

1. string :- content: “Stupid Programmer”;
2. image :- content: url(…..path of file….);
3. nothing :- content: “ ”;
4. counter : content: counter(li);

Note: content can not be html element. So We can not insert HTML element.

With this content we can apply other property to it like(color, background color, positioning etc.)

As Example:

Ater with CSS Property

h1::after{
content:’ After Content ‘;
color:white;
background-color: black;
}

Before With Css Property

h1::before{
content:’ Before Content ‘;
color:white;
background-color: black;
}

: vs :: in css

One you should also know the difference between : and ::

: denote to the pseudo class

:: denote to the pseudo selector

By Tech 9-on………………………………Give Valuable Suggestion