Safari cursor for ::after content

I’m trying to use the approach detailed in this Sitepoint article “Accessible footnotes css”

However we’re not getting the pointer cursor on the content injected with the ::after rule.

Here’s a really simple demonstration of the problem (of course you’ll have to view it in Safari :slightly_smiling_face:

<!DOCTYPE html>

<html lang="en">
    <meta charset="utf-8" />
      .dafter::after {
        content: "[1 (cursor pointer please)]";
        cursor: pointer;
      .noafter {
        cursor: pointer;

    <div class="dafter">Some text (want pointer curesor on ::after content</div>
    <br />
    <div class="noafter">Just some text that I want a pointer cursor for</div>

Does anyone know if there’s a way to kick Safari into recognizing this?

1 Like

I don’t think it works for pseudo elements in Safari (probably because pseudo content can have no action associated with it as it is not real content).

There is a hack you can use by using pointer-events. You turn off pointer events for the the whole element and then just turn it back on when needed.


.dafter {
  cursor: pointer;
  pointer-events: none;
.dafter::after {
  content: "[1 (cursor pointer please)]";
  pointer-events: auto;

If you have other content in that .dafter element that needs a cursor then re-enable the pointer events for those elements also. (.dafter a{pointer-events: auto;})

Thought we had it… however that effectively turns the rest of the <a> tag content into a “not an <a> tag” in that you can’t click on it to follow the link. At that point, might as well just put the <a> tag around just the footnote link.

Thanks though, thought it did the trick for a bit there.

1 Like

Yes you can follow the link.

Here’s it working in Chrome and Safari.

Or did you mean something else?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.