What is the difference between ::before and ::after generated content?

The difference is their position relative to the selected element’s content: ::before comes first, and ::after comes last. Both are generated as immediate children of that element; neither means “before or after the element in the page.” [S1]

For example, if a paragraph contains Read this, a ::before decoration appears before those words within the paragraph, while an ::after decoration appears after them. Use whichever position fits the presentation. The choice does not make one pseudo-element more suitable for important information than the other.

Assuming the label is only a visual flourish and not information readers need, you could write:

<a class="guide-link" href="YOUR-DESTINATION">Read the guide</a>

.guide-link::after {
  content: " →";
}

The text Read the guide is in the HTML; the arrow is generated after it. The CSS content property supplies the generated text for the pseudo-element. [S2] Replace YOUR-DESTINATION with the link’s actual destination. If you want to put the decoration before the link text instead, change ::after to ::before.

Put that warning in the HTML, not only in ::after. It conveys information about what happens when someone follows the link, so it should remain available as document content. Generated content may not be represented in the accessibility tree or announced by some combinations of browsers and assistive technology; it is also not part of the DOM. [S2] The source does not establish exactly how every browser or assistive technology will handle a particular generated string. When information is critical, include it in the main document and ensure it remains available if CSS is disabled. [S2]

For example, add a visible label or other appropriate HTML content to communicate the warning. A CSS-generated version could be an optional visual repeat, but should not be the only place the warning exists.

Ask whether someone needs the content to understand the link or page. If yes, put it in the HTML; if it is purely decorative, ::before or ::after may be a reasonable fit. MDN gives cosmetic examples such as icons and quotation marks. [S1]

A practical test is to read the page with the decoration removed: if the message is incomplete or misleading, make that message document content instead. You can still use a pseudo-element for optional visual styling. This is a decision aid, not a guarantee about how every assistive-technology setup will present generated content. The key distinction is placement; neither pseudo-element makes essential information more dependable than the other.