CSS Pseudo-elements

CSS Pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

The general syntax for CSS Pseudo-elements looks like this:

CSS pseudo element

In CSS pseudo- elements It looks just like normal styling statements but with the colons to indicate the specific part of the elements contained in the selector that you want to style.

There are currently seven CSS pseudo-elements . They are:

CSS Pseudo-elements List

  1. ::after
  2. ::before
  3. ::first-letter
  4. ::first-line
  5. ::marker
  6. ::placeholder
  7. ::selection

There are others, but they are still considered experimental technology. So, in this post, the focus will be on the main seven pseudo-elements.

CSS Pseudo-elements ::first-letter

The ::first-letter CSS pseudo-element is used to add a special style to the first letter of a text.

The following example formats the first letter of the text in all <p> elements: 

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

CSS pseudo-element ::first-line

The ::first-line CSS 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.

CSS pseudo-element ::marker

The ::marker CSS pseudo-element selects the markers of list items.

The following example styles the markers of list items:

::marker {
  color: pink;
  font-size: 28px;
}

CSS pseudo-element ::before

#star-six {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: relative;
}
#star-six:after {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
  position: absolute;
  content: "";
  top: 30px;
  left: -50px;
}
Show URL’

CSS pseudo-element ::after

The ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

div::after {
  content: "after";
}
div::after {
  content: "after";
}

The only reasons to use one over the other are:

  • You want the generated content to come after the element content, positionally.
  • The ::after content is also “after” in source-order, so it will position on top of ::before if stacked on top of each other naturally.

The value for content can be:

  • A string: content: "a string"; – special characters need to be specially encoded as a unicode entity. See the glyphs page.
  • An image: content: url(/path/to/image.jpg); – The image is inserted at it’s exact dimensions and cannot be resized. Since things like gradients are actually images, a pseudo element can be a gradient.
  • Nothing: content: “”; – Useful for clearfix and inserting images as background-images (set width and height, and can even resize with background-size).
  • A counter: content: counter(li); – Really useful for styling lists until :marker comes along.

Note that you cannot insert HTML (at least, that will be rendered as HTML). content: "<h1>nope</h1>";

: vs ::

Every browser that supports the double colon (::) CSS3 syntax also supports just the (:) syntax, but IE 8 only supports the single-colon, so for now, it’s recommended to just use the single-colon for best browser support.

:: is the newer format intended to distinguish pseudo content from pseudo-selectors. If you don’t need IE 8 support, feel free to use the double-colon.

CSS Pseudo element Browser compatibility

Here is some useful information you might want to know about the pseudo-elements in regards to browser support:

  • Every popular browser except Safari and Opera fully support the ::after pseudo-element
  • Every popular browser except Safari, Internet Explorer 9, and Opera fully support the ::before pseudo-element
  • The ::marker pseudo-element is supported only by Firefox
  • The ::first-letter pseudo-element is supported by all browsers except Safari on iOS devices
  • The ::first-line pseudo-element is fully supported by every browser on every screen size
  • The ::placeholder pseudo-element is supported in all browsers except Internet Explorer
  • The ::selection pseudo-element is supported by all web browsers