DIV Sets a Pseudo Class Bottom Border

Need

You can use CSS pseudo-elements (::after or ::before) to set a pseudo-class bottom border for div elements. This way you can add a custom styled bottom border to div elements without using extra HTML markup.

Code

Here is a sample CSS code showing how to use a pseudo-element to set a bottom border for a div:

div {
   position: relative;
   padding-bottom: 10px; /* Adjust the height of the bottom border of the pseudo class */
}

div::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px; /* set the height of the bottom border */
   background-color: #f00; /* set the color of the bottom border */
}

In the above code, we first set position: relative; for div so that the positioning of the pseudo-element will be done relative to the div.

Then, we use the pseudo-element ::after to create a pseudo-class element and use position: absolute; to position it at the bottom of the div.

The bottom: 0; and left: 0; properties position the pseudo-element at the bottom-left corner of the div.

The width: 100%; attribute makes the pseudo-element the same width as the div.

The height: 2px; attribute sets the height of the pseudo-element, which is the height of the bottom border.

The background-color: #f00; attribute sets the background color of the pseudo-element, here it is set to red (#f00), you can change it to other colors as needed.

With the above CSS code, you will create a custom styled bottom border at the bottom of the div element. Just apply this CSS style to the div element you want to add a bottom border to.