Why does CSS content not appear on my pseudo-element?

Start with the content declaration. A rule for ::before or ::after needs a generated-content value; if content is missing, normal, or none, the pseudo-element is not rendered. [S1] [S2]

Try this small example with an ordinary element:

<span class="label">Draft</span>

.label::after {
  content: " (not final)";
}

For a quick test, use a visible text value. That helps distinguish missing generated content from content that is present but not immediately apparent.

Test the rule on an ordinary element such as a span or div. One specific limitation is that ::after cannot be applied to replaced elements such as <img>. [S2] If your rule targets an image, put a wrapper around it and target the wrapper instead:

<span class="image-wrap"><img src="[image path]" alt="Example"></span>

.image-wrap::after {
  content: "Image note";
}

Here, [image path] is a placeholder to replace in your own page. This example addresses the replaced-element limitation; it does not establish whether other elements or layouts in your project are causing a separate issue.

Check whether the intended selector matches the element, then inspect the computed content value for that pseudo-element. The final property value depends on the declarations that apply and how they rank in the cascade. [S2] [S3]

For example, if the computed value is none, the pseudo-element will not be generated. Look for another applicable content declaration in the styles for that pseudo-element. In your browser’s developer tools, inspect its ::after styles or computed styles and confirm that the selector matches and the winning content value is the one you expect.

The references explain rendering conditions and the cascade, but do not prescribe a complete, browser-specific debugging workflow. Developer-tool labels and layouts can vary.

Work through these checks in order, changing one thing at a time:

1. Confirm you are using the intended pseudo-element: ::before or ::after.
2. Temporarily set a visible value, such as content: "TEST";. Missing content, normal, and none do not generate the pseudo-element. [S1] [S2]
3. Confirm the selector matches the element you meant to target.
4. Check whether the target is a replaced element, such as <img>; try a wrapper instead. [S2]
5. Inspect the computed content value and look for another applicable declaration that wins in the cascade. [S3]
6. If visible test text appears but the original effect does not, restore the intended content value and investigate the styling separately.

Copyable minimal test:

.example::after {
  content: "TEST";
}

Replace .example with a selector that matches an element in your page. Remove the temporary text after testing. This checklist narrows common causes; it cannot identify a project-specific cause without the relevant HTML and CSS.