What Actually Pseudo Element? Why Do We Need Pseudo element?

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).

There are many CSS Pseudo Element, but today We are going to talk about ::before and ::after pseudo Element.

CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a

but not an ). This effectively allows you to show something on a web page that might not be present in the HTML content. You shouldn’t use it for actual content because it’s not very accessible in that you can’t even select and copy text inserted on the page this way —  it’s just decorative content.

img {
display: block; /* Avoid the space under the image caused by line height */
position: relative;
width: 100%
}

In this article, I’ll walk you through seven different examples that showcase how ::before and ::after can be used to create interesting effects.

img::before {
background-color: hsl(0, 0%, 93.3%);
border: 1px dashed hsl(0, 0%, 66.7%);
/* ... */
}

That’s because we set content to an empty string (which we need to display our generated content and styles) and cover the entire space, including the actual alt text. It’s there, we just can’t see it.

We can see it if we display the alt text in an alternate (get it?) way, this time with help form the ::after pseudo-element. The content property is actually capable of displaying the image’s alt attribute text using the attr() function:

` img::after {
  content: attr(alt);

  /* Some light styling */
  font-weight: bold;
  position: absolute;
  height: 100%;
  left: 0px;
  text-align: center;
  top: 1px;
  width: 100%;
} 

`