Pseudo-Elements

Download css eBook

Introduction

Pseudo-elements, just like pseudo-classes, are added to a CSS selectors but instead of describing a special state, they allow you to scope and style certain parts of an html element.

For example, the ::first-letter pseudo-element targets only the first letter of a block element specified by the selector.

Syntax

  • selector::pseudo-element {property: value}

Parameters

pseudo-elementDescription
::afterInsert content after the content of an element
::beforeInsert content before the content of an element
::first-letterSelects the first letter of each element
::first-lineSelects the first line of each element
::selectionMatches the portion of an element that is selected by a user
::backdropUsed to create a backdrop that hides the underlying document for an element in the top layer's stack
::placeholderAllows you to style the placeholder text of a form element (Experimental)
::markerFor applying list-style attributes on a given element (Experimental)
::spelling-errorRepresents a text segment which the browser has flagged as incorrectly spelled (Experimental)
::grammar-errorRepresents a text segment which the browser has flagged as grammatically incorrect (Experimental)

Remarks

  • Sometimes you will see double colons (::) instead of just one (:). This is a way to separate pseudo-classes from pseudo-elements, but some older browsers like Internet Explorer 8 only supports single colon (:) for pseudo-elements.

  • One can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.

  • Pseudo-elements are not a part of the DOM, therefore are not targetable by :hover or other user events.

Related Examples

Stats

238 Contributors: 18
Wednesday, July 5, 2017
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook