What are pseudo elements in CSS?

Pseudo elements in CSS are used to style specific parts of an HTML element that don’t correspond to actual elements in the HTML structure. The term “pseudo” indicates that these are like elements, but not really part of the document tree itself. Instead of describing a special state (which is the role of pseudo-classes), pseudo-elements allow you to target and style subparts of an element or even insert content where there is no markup in the HTML.

Concepts:

• Definition: Pseudo-elements let you style specific portions of an element, acting as if an extra, virtual element were present in the HTML.
• Purpose: Used to style the first letter or line of text, insert content before or after an element, or style the selected portion of an element. This helps in separating content from presentation by avoiding the need for extra, non-semantic HTML elements just for styling purposes.
• Syntax: In CSS3, pseudo-elements are denoted by a double colon (::). However, for backward compatibility with older browsers, a single colon (:) is still supported for some common pseudo-elements like :before and :after, as well as :first-letter and :first-line. It is generally recommended to use the double colon syntax for clarity and to differentiate them from pseudo-classes, which always use a single colon.
• Difference from Pseudo-classes: Pseudo-classes select elements based on a certain state or their position in the document tree (e.g., :hover, :first-child). In contrast, pseudo-elements style a specific part of an element. You can think of a pseudo-selector (pseudo-class) as selecting a subpart of the original thing it is selecting.
• content Property: For the ::before and ::after pseudo-elements to be visible, the content property is usually required. This property allows you to insert text, images (using url()), or even attribute values (using attr()). The content attribute can even have an empty value (content: “”;) if you intend to style the pseudo-element as a visual element without any text.

Code Examples:

::before and ::after for Inserting Content: pseudo-elements insert content at the beginning and end of an element, respectively.

div {
  color: black;
  border: 1px solid black;
  padding: 1px;
}
div::before {
  content: 'before'; /* Inserts "before" at the start */
  color: green;
  border: 1px solid green;
  margin-right: 5px;
}
div::after {
  content: 'after'; /* Inserts "after" at the end */
  color: red;
  border: 1px solid red;
  margin-left: 5px;
}
<div>This is a div element.</div>

This would extract “before This is a div element. after”.

::first-letter for Styling the First Letter: This pseudo-element targets the very first letter of a block-level element.

p::first-letter {
  color: red;
  font-size: xx-large;
}
<p>This is a paragraph of text.</p>

The “T” in “This” would be styled in red and with a very large font size.

::first-line for Styling the First Line: This pseudo-element targets the first line of text in a block-level element. The width of the line depends on the available space.

p::first-line {
  font-weight: bold;
  background-color: yellow;
}
<p>This is the first line of a longer paragraph. The rest of the text will wrap to the next line if it's too long to fit within the container's width.</p>

The first line of the paragraph would have a bold font weight and a yellow background.

::selection for Styling Selected Text: This pseudo-element styles the portion of an element that is highlighted by the user (e.g., when dragging the mouse over the text). You might need to use vendor prefixes for broader browser support (like ::-moz-selection for Firefox).

p::selection {
  background-color: red;
  color: white;
}
p::-moz-selection { /* For Firefox */
  background-color: red;
  color: white;
}
<p>Select this text to see the custom selection styles.</p>

When the user selects the text, the background will turn red, and the text color will become white.

Using ::before in Lists: Pseudo-elements can be used to create custom bullets in lists.

ul {
  list-style-type: none; /* Remove default bullets */
  padding-left: 0;
}
li::before {
  content: "";
  display: inline-block;
  margin-right: 10px;
  height: 10px;
  width: 10px;
  background: linear-gradient(red, blue); /* Custom bullet */
  border-radius: 50%;
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

This would display a custom gradient circle as a bullet point for each list item.

It’s important to remember that pseudo-elements do not add new elements to the DOM tree. They provide a way to style parts of existing elements as if they were separate entities. Browser support for CSS3 pseudo-elements is generally good, although older versions of Internet Explorer might have had limited or different support, only recognizing the single colon syntax.

CSS3 Topics