CSS | Pseudo Elements - GeeksforGeeks

12 Sep, 2021
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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
vidyasagar4069
sweetyty
CSS-Basics
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
Hide or show elements in HTML using display property