2 0

CSS Pseudo Elements: A Quick Guide

Here is a quick guide on CSS Pseudo Elements. Hope it helps 🚀

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

For example, it can be used to:

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

Syntax:

selector :: pseudo-element{
 property:value;
}

Pseudo Element and Examples:

::before – Creates a pseudo-element that is the first child of the selected element. It is inline by default.

a::before{
 content:"Hello";
}

::after – Creates a pseudo-element that is the last child of the selected element. It is inline by default.

a::after{ 
 content:"Hello"; 
}

::first-letter – Applies styles to the first letter of the first line of a block-level element.

/*Selects the first letter of a <p> */
p::first-letter{
       font-size:1rem;
       }

::first-line – Applies styles to the first line of a block level element.

/*Selects the first line of a <p> */
p::first-line{
       color:#151515;
       }

::placeholder – Represents the placeholder text in an <input> or <textarea> element.

input::placeholder{
       color:#ddd;
       font-weight:600;
}

::file-selector-button – Represents the button of an <input> of type=”file”.

input[type="file"]::file-selector-button{
       background-color:#fff;
       border:2px solid#000;
}

::marker – Selects the marker box of a list item, which contains a bullet or number.

ul li::marker{
       color:blue;
       font-size:1.2em;
}

::selection – Applies styles to the part of a document that has been highlighted by the user(such as clicking and dragging).

p::selection{
       background-color:#151515;
       color:#fff;
}

::cue – Matches WebVTT cues within a selected element. Captions and other cues in media with VTT tracks can be styled with this.

::cue{
   color:#000;
   font-weight:600;
}

::backdrop – Creates a backdrop that covers the entire viewport and is rendered immediately below a <dialog> or any element that enters full screen mode using the Full screen API.

dialog::backdrop{
   background-color:#151515;
}

::part() – Represents any element within a shadow tree that has a matching part attribute.

custom-element::part(foo){
   /*Styles to apply to the foo part */
}

::slotted() – Represents any element that has been placed into a slot inside an HTML template.

/*Selects any element placed inside a slot */
:: slotted(*){
  font-weight:600;
}
/*Selects any<span>placed inside a slot */
:: slotted(span){
  font-weight:800;
}

Also Read: Top 5 Advanced JavaScript Concepts That Will Make You A Better Developer

Happy

1 100 %

Sad

0 0 %

Excited

0 0 %

Sleepy

0 0 %

Angry

0 0 %

Surprise

0 0 %

Akash Kothari

I am passionate about my work. Because I love what I do, I have a steady source of motivation that drives me to do my best. In my last job, this passion led me to challenge myself daily and learn new skills that helped me to do better work

www.techdevil.in