CSS Pseudo Elements - A Quick Guide
2 0
Read Time:2 Minute, 42 Second

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;
}
Note: You can use only one pseudo-element in a selector, It must appear after the simple selectors in the statement.

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;
}

 

♥️ If you find it useful, please express your appreciation by giving it a like! (P.S. -It won’t cost anything don’t worry just go for it 😉)

✍️ Feel free to comment your thoughts and queries (Trust me it motivates me a lot 💎)

📥 Don’t forget to save it for later use (Or else you’ll miss it 🥲)

📲 Also share it with your friends and colleagues out there (Let’s help each other grow 👊🏻)

Do Follow Us on:

Facebook.com

Twitter.com

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

Happy
Happy
100 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

By 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

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

One thought on “CSS Pseudo Elements – A Quick Guide

Leave a Reply

Discover more from TechDevil

Subscribe now to keep reading and get access to the full archive.

Continue reading