On this page

CSS Pseudo-elements (::before, ::after)

Badar KhalilUpdated September 29, 2026 5 min read

What Are CSS Pseudo-elements?

CSS pseudo-elements let you style a specific part of an element, or insert generated content, without adding extra HTML. The two most popular are ::before and ::after. They are the backbone of modern icon decoration, badges, tooltips, overlays, and many clever UI tricks. In this lesson our focus keyword is CSS pseudo-elements, and you will also learn the trending techniques developers search for: CSS ::before and ::after examples, CSS tooltip without JavaScript, CSS overlay gradient, CSS drop cap, and styling ::marker, ::selection and ::placeholder.

Pseudo-class vs Pseudo-element

A pseudo-class (single colon, such as :hover or :focus) selects an element in a certain state. A pseudo-element (double colon, such as ::before) selects a part of an element or creates a virtual child. The double-colon syntax was introduced in CSS3 to tell them apart. Browsers still accept the single-colon form for the four legacy pseudo-elements (:before, :after, :first-line, :first-letter), but you should always write the double-colon form in new code.

How ::before and ::after Work

::before creates a virtual element as the first child of the selected element.
::after creates a virtual element as the last child of the selected element.
They are inline by default. Set display: block, inline-block or position: absolute to control layout.
They will not render unless the content property is set. Even an empty string works: content: '';.
They do not work on replaced elements such as <img>, <input>, <br> because these have no content box to place children in.
They cannot be selected by JavaScript with querySelector, but you can read them with getComputedStyle(el, '::before').

The content Property

The content property accepts several kinds of values:

A string: content: 'New';
An empty string for purely decorative shapes: content: '';
An attribute value: content: attr(data-label);
A counter: content: counter(item) '. ';
An image: content: url(icon.svg);
Quote keywords: open-quote and close-quote

Real-world Use Cases

1. Decorative icons and badges

Add a small 'NEW' badge or an arrow icon after a link without touching the HTML markup. This keeps your HTML semantic and clean.

2. Tooltips without JavaScript

Combine attr(data-tip), position: absolute and :hover to display a pure-CSS tooltip. This is one of the most searched CSS tricks.

3. Gradient overlays on images or cards

Use ::after with position: absolute; inset: 0; and a linear-gradient to darken the bottom of a card so white text stays readable.

4. Clearfix

Before Flexbox and Grid, the clearfix hack used ::after with clear: both to make a parent contain floated children. You will still meet it in legacy code.

5. Custom shapes

Triangles, ribbons, speech-bubble tails and decorative lines are all built with empty pseudo-elements and borders or gradients.

Other Useful Pseudo-elements

Pseudo-element	What it styles
`::first-letter`	First letter of a block (drop caps)
`::first-line`	First formatted line of a block
`::selection`	Text highlighted by the user
`::placeholder`	Placeholder text in inputs
`::marker`	Bullet or number of a list item
`::backdrop`	Background behind a `<dialog>` or fullscreen element
`::file-selector-button`	The button inside `input type='file'`

Modern CSS also introduces ::view-transition pseudo-elements for the View Transitions API, and ::highlight() for the CSS Custom Highlight API. These are newer and browser support should be checked before production use.

Accessibility Considerations

Generated content may be announced by some screen readers, and it cannot be selected or copied. Never place essential information only in ::before or ::after.
For decorative icons you can provide alternative text using the modern syntax content: url(icon.svg) / ''; which marks the content as decorative in supporting browsers.
Do not rely on pseudo-element text for SEO. Search engines treat it as presentation, not content.

Best Practices

Use pseudo-elements for decoration, not for meaningful content.
Set position: relative on the parent when the pseudo-element uses position: absolute.
Use pointer-events: none on overlay pseudo-elements so they do not block clicks.
Keep a consistent naming approach and comment complex shape tricks for teammates.
Prefer inset: 0 over the four-property shorthand top/right/bottom/left in modern projects.

Common Mistakes

Forgetting content, so nothing appears.
Trying to add ::before to an <img> or <input>.
Forgetting position: relative on the parent, so the pseudo-element flies to the wrong place.
Placing an overlay on top of a link without pointer-events: none, making the link unclickable.
Using a single colon for newer pseudo-elements such as :marker, which is invalid.

Summary

CSS pseudo-elements let you add visual polish without extra markup. Master ::before and ::after, always set content, position them deliberately, and keep them decorative. Try the interactive examples below and edit them live.

Try it Yourself HTML

<style>
  .link-new { position: relative; font-family: sans-serif; font-size: 20px; color: #2563eb; text-decoration: none; }
  .link-new::after { content: 'NEW'; margin-left: 8px; padding: 2px 8px; font-size: 12px; font-weight: bold; color: #fff; background: #ef4444; border-radius: 999px; vertical-align: middle; }
  .link-external::before { content: '\2192 '; }
</style>
<p><a class='link-new' href='#'>Latest CSS Course</a></p>
<p><a class='link-external' href='#'>External Resource</a></p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .tip { position: relative; display: inline-block; padding: 10px 16px; background: #1e293b; color: #fff; font-family: sans-serif; border-radius: 6px; cursor: help; margin: 50px; }
  .tip::after { content: attr(data-tip); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: #0f172a; color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .tip::before { content: ''; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #0f172a; opacity: 0; transition: opacity .2s; }
  .tip:hover::after, .tip:hover::before { opacity: 1; }
</style>
<span class='tip' data-tip='Pure CSS tooltip, no JavaScript!'>Hover over me</span>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .card { position: relative; width: 300px; height: 200px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #22c55e, #3b82f6); font-family: sans-serif; }
  .card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75), transparent 60%); pointer-events: none; }
  .card h3 { position: absolute; left: 16px; bottom: 12px; margin: 0; color: #fff; z-index: 1; }
</style>
<div class='card'><h3>Readable Title Over Image</h3></div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  article { font-family: Georgia, serif; max-width: 420px; line-height: 1.6; }
  article p:first-of-type::first-letter { float: left; font-size: 3.2em; line-height: .9; padding-right: 8px; color: #b91c1c; font-weight: bold; }
  article ::selection { background: #fde047; color: #111; }
  ul.custom li::marker { color: #2563eb; font-size: 1.2em; }
  input::placeholder { color: #94a3b8; font-style: italic; }
</style>
<article>
  <p>Drop caps make long articles feel editorial. Select this text to see the custom highlight color.</p>
  <ul class='custom'><li>Styled marker one</li><li>Styled marker two</li></ul>
  <input placeholder='Styled placeholder text'>
</article>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  .clearfix::after { content: ''; display: table; clear: both; }
  .box { border: 2px solid #334155; padding: 8px; }
  .float { float: left; width: 80px; height: 80px; background: #f97316; margin: 4px; }
</style>
<div class='box clearfix'><div class='float'></div><div class='float'></div></div>
<p>The bordered box now contains its floated children thanks to ::after.</p>

Output

Press Run to execute.

Exercise: Add a Required Star to LabelsHTML

Using only CSS, make every label that has the class 'required' show a red asterisk after its text. Use the ::after pseudo-element and the content property. Do not change the HTML.

Try it Yourself HTML

<style>
  /* Write your CSS here */
</style>
<label class='required'>Full Name</label>
<br>
<label class='required'>Email</label>

Output

Press Run to execute.

Show expected output

Each label displays a red * immediately after the text.

This is a self-check — compare your result with the expected output above.

Exercise: Build a Pure CSS RibbonHTML

Create a small 'SALE' ribbon in the top-right corner of a product box using ::before. The box must have position: relative. The ribbon should have a red background, white bold text, and rounded corners.

Try it Yourself HTML

<style>
  .product { position: relative; width: 240px; height: 140px; border: 1px solid #cbd5e1; padding: 16px; font-family: sans-serif; }
  /* Add .product::before here */
</style>
<div class='product'>Wireless Headphones</div>

Output

Press Run to execute.

Show expected output

A red SALE label appears in the top-right corner of the box.

This is a self-check — compare your result with the expected output above.

Quiz: Pseudo-elements Quiz Pass 70%

Loading quiz…

Was this page helpful?