1.

<div class="layout">   <div class="a box">A</div>   <div class="b box">B</div>   <div class="c box">C</div>   <div class="d box">D</div> </div>

Answer»

Pseudo-elements are used to style or modify the specific part of an HTML ELEMENT using CSS. Let us take an EXAMPLE and understand this better.

Examples:

  1. Styling the first letter of an element.
  2. Inserting the CONTENT before or after the element.
/* Styling the first letter of a p tag */ p::first-letter {     color: red; } /* Adding the content after p tag */ p::after{     content: "I'm added after the element"; } /* Adding the content before p tag */ p:hover::before{     content: "I'm added before the element" }

Here, in the above example to add the first letter to be in red we use the first-letter pseudo-element. For which the first letter of the paragraph will be in red color. In the next example, we have after and before in which while rendering the p tag. By default, we’ll have the content in the after pseudo-element DISPLAYED at the end of the p tag. Whereas when you hover on the p tag. We’ll have the content in the before pseudo-element displayed in the beginning as we have used hover pseudo-class.


Discussion

No Comment Found

Related InterviewSolutions