Pseudo-elements & Attribute Selectors

Sometimes you need to style a part of an element — the first letter, the text a user selected — or match elements by what their attribute contains. Pseudo-elements (::) and attribute selectors ([]) give you both powers without adding a single extra tag.

Pseudo-elements

A pseudo-element creates a virtual piece of the element you can style. The two most useful have exactly one :… modern syntax uses two: ::before and ::after.

::before and ::after

They insert generated content relative to the element. The content property is required — without it the pseudo-element does not render.

.badge {
  position: relative;
  background: #eef2ff;
  color: #4338ca;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge::before {
  content: "★ ";
  color: #f59e0b;
}

.quote {
  position: relative;
  padding-left: 2.5rem;
  font-style: italic;
}

.quote::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -0.25rem;
  font-size: 3.5rem;
  line-height: 1;
  color: #c7d2fe;
}

Expected output: every badge gains a gold star prefix; every quote gets an oversized decorative quotation mark — with no changes to the HTML.

Rule of thumb: decorative content (symbols, ornaments, quotes) belongs in ::before/::after. Real information — especially anything a screen reader should read — belongs in the HTML.

Other useful pseudo-elements

::selection { background: #4f46e5; color: white; }
.lead::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.8;
  padding-right: 0.1em;
  color: #4f46e5;
}
li::marker { color: #4f46e5; }

Attribute selectors

Match elements by the presence or value of an attribute — no extra classes needed:

a[href^="http"]::after  { content: " ↗"; font-size: 0.8em; }
a[href$=".pdf"]         { color: #dc2626; }
input[type="checkbox"]  { accent-color: #4f46e5; }
img[alt=""]             { outline: 2px solid red; } /* decorative images for quick audits */
[data-theme="dark"]     { background: #0f172a; color: #e2e8f0; }

Expected output: every external link shows a small arrow, PDF links turn red, and checkboxes use your brand colour — all from three rules and zero HTML changes.

Combining everything: a tag list

<ul class="tags">
  <li class="tag tag--new">Flexbox</li>
  <li class="tag">Grid</li>
  <li class="tag">Selectors</li>
</ul>

.tags { display: flex; gap: 0.5rem; list-style: none; }
.tag {
  padding: 0.3rem 0.8rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-size: 0.85rem;
}
.tag--new::after {
  content: " new";
  color: #16a34a;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.7em;
}
.tag[data-lang="css"] { border-color: #4f46e5; color: #4f46e5; }

Common mistakes

• Forgetting content — ::before with no content simply does not exist for styling.
• Generated content for real text — screen readers may skip it; keep copy in HTML.
• Icon fonts in pseudo-elements without aria-hidden care — decorative only, and never as the sole meaning.
• Case-sensitive attribute values — [type="EMAIL"] will not match; values are matched exactly (unless you add i flag: [type="email" i]).

Practice checklist

1. Add a star to every element with class .badge using ::before.
2. Give external links (href^="http") a visible "↗" marker.
3. Style ::selection with your brand colour and check it by selecting text.

Rules shape elements — now the fun part: giving them colour. Next: Colors & Opacity.