CSS | Pseudo Elements
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected elements. For Example, Styling the first letter or line of an element,
Insert content before or after the content of an element. All of these can be done using Pseudo Elements in CSS.
Note that in contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.
Syntax:
selector::pseudo-element {
property: value;
}There are many Pseudo Elements in CSS but the ones which are most commonly used are as follows:
- ::first-line Pseudo-element applies styles to the first line of a block-level element. Note that the length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text. Note that only a few properties are applied for first-line pseudo-element like font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, etc.
Example:
HTML
<!DOCTYPE html><html lang="en"><head> <title>first-line Demo</title> <style> body{ background-color:whitesmoke; color:green; font-size: large; text-align: center; } p::first-line{ color:Red; font-weight: bold; } </style></head><body> <h1>Geeks For Geeks</h1> <h2>::first-line element</h2> <p>This is a paragraph using first-line pseudo-element to style first line of the paragraph.Content in the first line turns red and becomes bold.</p></body></html> |
Output:
- ::first-letter Pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables). Note that only a few properties are applied for first-line pseudo-element like font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, etc.
Example:
HTML
<!DOCTYPE html><html lang="en"><head> <title>first-letter Demo</title> <style> body{ background-color:whitesmoke; color:green; font-size: large; text-align: center; } p::first-letter{ color:Red; font-size: 30px; font-weight: bold; } </style></head><body> <h1>Geeks For Geeks</h1> <h2>::first-letter element</h2> <p>This is a paragraph using first-letter pseudo-element to style first letter of the paragraph.first-letter element turned the first letter of this paragraph to red and made it bold.</p></body></html> |
Output:
- ::before Pseudo-element creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Example:
HTML
<!DOCTYPE html><html lang="en"><head> <title>before Demo</title> <style> body{ background-color:whitesmoke; color:green; font-size: large; text-align: center; } p::before{ content: '"'; color: red; font-size: 30px; } </style></head><body> <h1>Geeks For Geeks</h1> <h2>::before element</h2> <p>This is a paragraph to which we added red color quotation marks using ::before element.</p></body></html> |
Output:
- ::after Pseudo-element creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
Example:
HTML
<!DOCTYPE html><html lang="en"><head> <title>after Demo</title> <style> body{ background-color:whitesmoke; color:green; font-size: large; text-align: center; } p::after{ content: '"'; color: red; font-size: 30px; } </style></head><body> <h1>Geeks For Geeks</h1> <h2>::after element</h2> <p>This is a paragraph to which we added red color quotation marks using ::after element.</p></body></html> |
Output:
- ::marker Pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements.
Example:
HTML
<!DOCTYPE html><html lang="en"><head> <title>marker Demo</title> <style> body{ background-color: whitesmoke; color: green; text-align: center; } ul{ width: 40px; } ul li::marker{ color: red; font-size: 30px; } </style></head><body> <h1>Geeks For Geeks</h1> <h2>::marker element</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul></body></html> |
Output:
- ::selection Pseudo-element applies styles to the part of a document that has been highlighted by the user such as clicking and dragging the mouse across the text.
Example:
HTML
<!DOCTYPE html><html lang="en"><head> <title>selection Demo</title> <style> body{ background-color: whitesmoke; color: green; text-align: center; } p::selection{ color: red; background-color: green; font-size: 30px; } ::selection{ color: green; background-color: red; font-size: 30px; } </style></head><body> <h1>Geeks For Geeks</h1> <h2>::selection element</h2> <p>Content in this paragraph turns red with green background on selection.</p> <span>As this is not a paragraph, you can notice red background and green text on selection.</span></body></html> |
Output:
Please Login to comment...