DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for A Quick Note On CSS Pseudo Elements
Kiran Raj R
Kiran Raj R

Posted on

A Quick Note On CSS Pseudo Elements

CSS pseudo-elements creates a new virtual element that represents a part of the element which can be manipulated like regular elements with some limitations. Pseudo-elements are only visible to users, they are not available in the document element tree i.e. they are not real elements. Pseudo-elements are mainly used to style specific parts of an element to which the pseudo-element is attached. Double colon is prepended before the pseudo-element to distinguish it from pseudo-class, but for backward compatibility we can also use single colon. Commonly used CSS pseudo-elements are:

  1. ::after
  2. ::before
  3. ::first-letter
  4. ::first-line
  5. ::marker
  6. ::placeholder
  7. ::selection
  8. ::backdrop
/* Basic Syntax */

selector::pseudo-element{
    property: value;
}
Enter fullscreen mode Exit fullscreen mode

::after & ::before

::after / ::before creates a child element inside a element to which the pseudo class is attached. You must specify the content property of ::after / ::before to make the pseudo element to be visible, the content property can be an empty string. Both before and after pseudo-element has default display value of inline. In the β€œafter” pseudo element the β€œcontent” created by the pseudo element is inserted after the main element, for "before" pseudo element the content is insert before the main element.

Check the below example, the black circle is created using before and after pseudo elements.

Before and After Pseudo Element Example


.para {
  position: relative;
  background: #aaa;
  padding: 20px;
}

.para::before {
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: #000;
  position: absolute;
  left: -50px;
  top: -50px;
}

.para::after {
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: #000;
  position: absolute;
  right: -50px;
  bottom: -50px;
}

Enter fullscreen mode Exit fullscreen mode

Example on Codepen


::first-letter

First-letter pseudo element can be used to style the first letter of the first line, without using any extra html tags. For the first-letter pseudo element to work as expected the element should be of type display: block;, and the first letter should not be preceded by any other contents, for example images. Not all properties as supported by first-letter pseudo element, a limited set of font properties, margin property, padding property, border property and some background properties support first-letter pseudo element.

First Letter Pseudo Element Example


.para::first-letter{
  color:#fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 30px;
  background: #000;
  padding: 5px 10px;
  margin-right: 5px;
}
Enter fullscreen mode Exit fullscreen mode

::first-line

First line pseudo element is used to style the first line of a text in a block element. First-line pseudo element supports font, color, text and background properties only.

First Line Pseudo Element Example


.para::first-line{
  color:red;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 20px;
}

Enter fullscreen mode Exit fullscreen mode

Example on Codepen


::marker

Marker pseudo element helps to style the marker box of any element whose display property is set to list-item, it also helps to style the arrow of the summary elements. Marker pseudo element mainly supports color property and font properties.

Marker Pseudo Element Example


<ul class="list">
  <li class="item">One</li>
  <li class="item">Two</li>
  <li class="item">Three</li>
  <li class="item">Four</li>
</ul>


.item::marker {
  color: lime;
  font-size: 25px;
}
Enter fullscreen mode Exit fullscreen mode

Example on Codepen


::placeholder

Placeholder pseudo element helps to style the placeholder attributes of html input tags.

Placeholder Pseudo Element Example

.text1::placeholder {
  font-size: 18px;
  padding-left: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #f00;
  text-decoration: underline;
}
Enter fullscreen mode Exit fullscreen mode

Example on Codepen


::selection

Selection pseudo element helps to style text selected / highlighted by the user. Few properties like text shadow, background color and color properties are supported.

Selection Pseudo Element Example

.para::selection{
  color:#fff;
  background: #f00;
}
Enter fullscreen mode Exit fullscreen mode

Example on Codepen


::backdrop

Helps to style the backdrop area of video / dialog html
elements when viewed in full screen mode.

.video::backdrop {
  background: yellow;
  color: black;
}
Enter fullscreen mode Exit fullscreen mode

Example on Codepen.io

Top comments (4)

Collapse
 
vladi160 profile image
vladi160

They are good when you need some style, which requires another HTML element, but the good practice is not use HTML elements just for styling.

No way to manipulate pseudo elements with JS, but they are some hacks, of course:
stackoverflow.com/a/8046436/5849229

Collapse
 
kiranrajvjd profile image
Kiran Raj R Author

Thanks for the information

Collapse
 
sumitdwievdi profile image
SumitDwievdi

Thanks for sharing this information

Collapse
 
kiranrajvjd profile image
Kiran Raj R Author

You are welcome

🌚 Life is too short to browse without dark mode