CSS pseudo-elements are used to style specified parts of an element. While browsing a webpage, you might have noticed that the first letter of some paragraphs is larger than rest of letters. This type of styling for a specific part of elements is done using pseudo-elements in CSS. In this tutorial we will explain all the pseudo-elements and their functioning.
Table of Contents
- What is Pseudo-Element?
- Insertion Pseudo-Elements
- CSS Backdrop Pseudo-Element
- CSS Cue Pseudo-Element
- CSS First-Letter Pseudo-Element
- CSS First-Line Pseudo-Element
- CSS File-Selector-Button
- CSS Marker Pseudo-Element
- CSS Placeholder Pseudo-Element
- CSS Selection Pseudo-Element
- Multiple Pseudo-elements
- All CSS Pseudo-Elements
What is Pseudo-Element?
A pseudo-element in CSS, is used to style a specific part of an element that are not the part of the DOM (Document Object Model) and do not exist in the HTML markup. For Example first letter of a paragraph, placeholder text inside input element or selected part in a document.
- Pseudo-elements are denoted by a double colon (::) notation.
- Only one pseudo-element can be used in a selector.
- A pseudo-element in a selector must appear after all the other components. For example, p::last-line:hover is invalid.
- Pseudo-elements can be used to add decorative styles, create special effects, and modify the appearance of certain parts of an element, that has a state already applied to it. For example, p:hover::last-line is a valid statement and selects the last line of the paragraph when the paragraph is hovered
Syntax
selector::pseudo-element{property: value;}
The single colon syntax is supported by the browsers for the four original pseudo-elements, i.e., ::before, ::after, ::first-line, and ::first-letter.
Content Insertion Pseudo-Elements
In CSS, pseudo-elements ::before and ::after are used to insert text contents or images before and after any element.
Example
This example shows how to insert text and images at start and end of a paragraph using CSS.
<!DOCTYPE html><html><head><style>p:before { content: "NOTE:"; font-weight: bold; } p:after { content: url(/css/images/smiley.png); } </style></head><body><p> We inserted intro at start and emoji at end. </p></body></html></pre>CSS Backdrop Pseudo-Element
In CSS the ::backdrop pseudo-element is used to style the backdrop of an element that is in a modal context, such as the backdrop behind a <dialog> element when it is shown.
Example
Following example demonstrates use of ::backdrop pseudo-element.
<!DOCTYPE html><html><head><style>body{ height: 200px; } dialog { padding: 20px; border: 2px solid black; border-radius: 10px; } dialog::backdrop { /* Semi-transparent black */ background-color: rgba(0, 0, 0, 0.5); } </style></head><body><h3> Backdrop Example </h3><dialog id="myDialog"><p> This is a dialog with a styled backdrop. </p><button id="closeButton"> Close </button></dialog><button id="openButton">Open Dialog</button><script> const dialog = document.getElementById('myDialog'); const openButton = document.getElementById('openButton'); const closeButton = document.getElementById('closeButton');openButton.addEventListener('click', () => { dialog.showModal(); });closeButton.addEventListener('click', () => { dialog.close(); }); </script></body></html></pre>CSS Cue Pseudo-Element
In CSS, the pseudo-element ::cue is used with Web Video Text Tracks to style specific parts of text tracks, such as subtitles or captions, for media elements like <video> and <audio>.
Example
Following example demonstrates use of ::cue pseudo-element
<!DOCTYPE html><html><head><style>video { width: 100%; }</style></head><body><video controls src="/css/foo.mp4"><track default kind="captions"video::cue { font-size: 1rem; color: peachpuff; }srclang="en" src="/css/cue-sample.vtt" /></video></body></html></pre>CSS First-Letter Pseudo-Element
In CSS, the ::first-letter pseudo-element is used to target the first letter of text content of any elements like div, paragraph, span etc
Example
Following example demonstrates use of ::first-letter pseudo-element:
<!DOCTYPE html><html><head><style>p::first-letter { text-transform: uppercase; font-size: 2em; color: darkred; font-style: italic; } </style></head><body><p> this is a paragraph with first letter in lowercase, we used ::first-letter pseudo-element to capitalize first-letter of paragraph with a larger font size and a different color. </p></body></html></pre>CSS First-Line Pseudo-Element
In CSS, the ::first-line pseudo-element is used to target the first line of text content of any elements like div, paragraph, span etc
Example
Following example demonstrates use of ::first-line pseudo-element:
<!DOCTYPE html><html><head><style>p::first-line { background-color: #f0f0f0; color: darkred; font-style: italic; } </style></head><body><p> This is a normal paragraph with no stylings, we used ::first-line pseudo-element to only style first-line of paragraph by adding a background color, font-style and text color </p></body></html></pre>CSS File-Selector-Button Pseudo-Element
In CSS, the ::file-selector-button pseudo-element is used to style the button of a file input element (<input type="file">) in modern browsers.
Example
Following example demonstrates use of ::file-selector-button pseudo-element:
<!DOCTYPE html><html><head><style>body { display: block; height: 100px; }input::file-selector-button { background-image:url(/css/images/border.png); background-size: 200%; border: 2px solid black; border-radius: 8px; font-weight: 600; color: rgb(6, 1, 9); padding: 15px; transition: all 0.25s; } </style></head><body><h2> Select a file </h2><input type="file"></body></html></pre>CSS Marker Pseudo-Element
In CSS, the ::marker pseudo-element is used to style the marker of ordered list and unordered list.
Example
Following example demonstrates use of ::marker pseudo-element:
<!DOCTYPE html><html><head><style>ol li::marker { color: rgb(11, 38, 241); font-weight: bold; } ul li::marker { content: url('/css/images/smiley.png') } </style></head><body><h2>Numbered list</h2><ol><li>One</li><li>Two</li><li>Three</li></ol><h2>Bulleted list</h2><ul><li>One</li><li>Two</li><li>Three</li></ul></body></html></pre>CSS Placeholder Pseudo-Element
In CSS, the ::placeholder pseudo-element is used to style the default text inside text input element (<input type="text">).
Example
Following example demonstrates use of ::placeholder pseudo-element:
<!DOCTYPE html><html><head><style>.form { border: 2px solid black; background: lightgray; padding: 25px; display: flex; flex-direction: column; gap: 10px; }input{ padding: 10px; background-color: cornsilk; }input::placeholder { color: grey; font-style: italic; font-size: 20px; } </style></head><body><div class="form"><h2> Your Details:</h2><input type="text" placeholder="First Name"><input type="text" placeholder="Last Name"><input type="text" placeholder="Address"><input type="text" placeholder="Phone"></div></body></html></pre>CSS Selection Pseudo-Element
In CSS, the ::selection pseudo-element is used to style the user selected text inside any elements like div, paragraph, span etc
Example
Following example demonstrates use of ::selection pseudo-element:
<!DOCTYPE html><html><head><style>.highlight::selection { color: yellow; background: brown; } </style></head><body><p class="highlight"> Select Me!!! to see the effect. </p><p> No style applied to me. </p></body></html></pre>Multiple Pseudo-elements
We can also add multiple pseudo elements to a selector, Check out the example.
Example
Following example demonstrates usage of multiple pseudo-elements (::first-line and ::first-letter).
<!DOCTYPE html><html><head><style>p::first-line { text-decoration: underline; } p::first-letter { text-transform: uppercase; font-size: 2em; color: red; } </style></head><body><p> the first line of this paragraph will be underlined and first letter is uppercase, 2em and red in color, as the pseudo-element ::first-line & ::first-letter is applied on p. The other lines are not underlined. </p></body></html></pre>All CSS Pseudo-Elements
The following table shows all pseudo-elements in CSS:
Pseudo-element Description Example ::after Adds a pseudo-element that is the last child of the selected element. Try It ::backdrop Used to style the backdrop of an element like dialog box. Try It ::before Adds a pseudo-element that is the first child of the selected element. Try It ::cue Used to style the captions and cues in media with video text tracks. Try It ::first-letter Applies styles to the first letter of the first line of a block level element. Try It ::first-line Applies styles to the first line of a block level element. Try It ::file-selector-button Represents the button of an <input> of type="file". Try It ::marker Selects the marker box of a list item. Try It ::part() Represents an element within a shadow tree that has a matching part attribute. Try It ::placeholder Represents a placeholder text in an <input> or <textarea> element. Try It ::selection Applies styles to the selected part of the document (selected by clicking and dragging the mouse across text). Try It ::slotted() Represents an element that has been placed into a slot inside an HTML template. Try It ::grammar-error Used to style text that has been identified as grammatically incorrect by the browsers built-in grammar checking tools. Try It ::spelling-error Used to style text that has been identified as incorrect spelling by the browsers built-in spelling checking tools. Try It
Leave a Reply