CSS pseudo elements every CSS developer should know

CSS pseudo-elements are used to add special effects/styles to a specific part of the selected elements. A CSS selector selects the HTML element(s) for styling purposes. CSS selectors select HTML elements according to its id, class, type, attribute etc.

For example, the ::before and ::after pseudo-elements can be used to insert content before or after an element’s content.

Pseudo-elements are always declared using a double colon (::) syntax. They are always followed by the name of the pseudo-element and must be used in conjunction with a selector.

Reason to learn about CSS pseudo-elements:

• CSS pseudo-elements can be a valuable tool for front-end web developers. It can help you create better, more visually appealing websites and improve the overall user experience.
• With pseudo-elements, you have the ability to add content before or after an element, insert a first letter or line, and select a portion of an element which results in increased flexibility.
• It helps you create reusable styles that can be applied to multiple elements, saving time and making it much easier to maintain the styles in the future.
• Using pseudo-elements you add extra content to your HTML code without adding additional HTML elements.
• CSS pseudo-elements help in increasing visual enhancements of the code as well.

CSS pseudo-elements every CSS developer should know:

CSS ::selection Selector: The selection selector is used to set the CSS property to the part of the document that is selected by the user (such as clicking and dragging the mouse across text).

• It is used to style the text that the user in an HTML document selects.
• It applies styles to the selected text, allowing you to customize the look and feel of text selections.
• It is a custom text selector that is used to override the default text selection color.

Example:

CSS

::selection {
  color: green;
  background: white;
}

Output: In this example, the background color of the selected text is set to white and the text color is set to green. You can use any CSS properties that are applicable to text, such as font size, font weight, etc., to style the selected text.

CSS ::selection Selector

Note: This selector is not supported in internet explorer but works on all other major browsers.

CSS ::placeholder Selector: The placeholder selector in the CSS pseudo-element is used to design the placeholder text by changing the text color and it allows to modify the style of the text.

• It is used to style the placeholder text of an input element.
• It is the text that appears in an input field when it is empty and has not been focused.
• The placeholder text is set with the placeholder attribute, which specifies a hint that further describes the expected value of an input field.

Example:

CSS

::-webkit-input-placeholder {
  color: green;
}

:-ms-input-placeholder {
  color: green;
}

::placeholder {
  color: green;
}

Output: In this example, the color of the text that appears in the input field when it is empty is set to green.

CSS ::placeholder Selector

Note: This selector is relatively new and may not be supported in all browsers.

CSS ::marker Selector: The ::marker selector in CSS is used to change the marker properties. Here marker is the marker box of a list item.

• It is used to style the marker box of a list item, which is the content that is displayed before the list item text, typically as a bullet point or number.
• It is used in customizing the appearance of the marker, such as its color, font, and size, without affecting the content of the list item itself.

Example:

CSS

::marker {
  color: green;
  font-size: 30px;
}

Output: In this example, the “::marker” pseudo-element is used to change the color of the markers in an ordered list

CSS ::marker Selector

Note: It is not supported in all browsers, so it’s always better to check the compatibility of your styles before only.

CSS ::first-letter Selector: The ::first-letter selector is used to applying the style to the first letter of the first line of a block-level element, the condition is it should not be preceded by other content ( such as images or inline tables).

• It is used to select and style the first letter of a block-level element.
• It is commonly used to format the initial letters of a paragraph, such as in drop caps or other typographic effects.
• The below properties can be used with::first-letter: font properties, color properties, background properties, margin properties, padding properties, border properties, text-decoration, vertical-align (only if the float is ‘none’), text-transform, line-height, float, and clear.

Example:

CSS

p::first-letter {
  font-size: 300%;
  color: #006400;
}

Output: In this example, the first letter is displayed in the color & font size that we have set.

CSS ::first-letter Selector

Note: It is very important to know that it will work with block-level elements & not with inline elements.

CSS ::first-line Selector: The ::first-line selector in CSS is used to apply style to the first line of a block-level element.

• It is used to select and style the first line of a block-level element.
• It is commonly used to format the first line of a paragraph, such as to change its font size, font family, or color.

Example:

CSS

p::first-line {
  background-color: lightgreen;
}

Output: In this example, the first line of the paragraph is displayed in green just like we have set.

CSS ::first-line Selector

Note: It is very important to know that it will work with block-level elements & not with inline elements.

Conclusion: Thus, we learned about the CSS pseudo-elements every CSS developer should know about & it’s the importance which ultimately results in better user experience, increased flexibility, better maintenance & increased visual enhancements of the code.