Pseudo Elements Generator

Create ::before and ::after pseudo-element styles

Pseudo Element Settings

Configure pseudo-element properties

Pseudo Element

Content

Width: 20px

Height: 20px

Background Color

Position

Top: 0px

Left: 0px

Border Radius: 0px

Live Preview

See your pseudo-element in action

ELEMENT

Generated Pseudo Element Code

CSSSCSS

.pseudo-element {
  position: relative;
}

.pseudo-element::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  background-color: #3b82f6;
  border-radius: 0px;
}