Safari cursor for ::after content

HTML & CSS
1

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">
  <head>
    <meta charset="utf-8" />
    <style>
      .dafter::after {
        content: "[1 (cursor pointer please)]";
        cursor: pointer;
      }
      .noafter {
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <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>
  </body>
</html>

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

1 Like
2

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.

e.g.

.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;})

3

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
4

Yes you can follow the link.

Here’s it working in Chrome and Safari.

Or did you mean something else?

5

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