Selector- Pseudo-selector (Pseudo-element)

Chrome Devtool Selector


Pseudo-elements are element added to selectors to be able to select a sub-content of a content element. See CSS - Addessing model (through selector and properties).

They will also add an element into the flow.

This are not pseudo-class


selector::pseudo-element {
  property: value;




  • The HTML
<p>A first letter pseudo class demo where the first letter A will get a bigger font-size</p>
p::first-letter {
   font-size: 1.5rem;
   border:1px solid aqua;
  • Result:

before / after

See the content property for before and after pseudo-element example.

Documentation / Reference

Discover More
CSS - (Implementation|Processing Model|Rendering)

How user agents may implements CSS. A user agent processes a source by going through the following steps: Parse the source document and create a document tree (CSSOM) Identify the target media...
CSS - Addessing model (through selector and properties)

CSS CSS addressing model. Selectors and properties allow style sheets to refer to the following parts of a document or user agent: Elements in the document tree and certain relationships between...
CSS - Content (Property)

The content CSS property is used with: the ::before and ::after pseudo-elements to generate content respectively: before or after the content of an element. Visually, the content is located at...
React - Styled Component

Styled component is a Css In Js solution. Utilising tagged template literals and the power of CSS, styled-components allows you to write actual CSS code to style your components. styled-components ...

Share this page:
Follow us:
Task Runner