Is it possible to add "aria-hidden" for css content property?

Question

I have a decorative element in the header that separates links "|". It is added as a CSS content element:

::after {
    content: "|";
    .....
}

In HTML it is presented inside of the span along with the header link:

<span>
    <a ...>
        Link
    </a>
</span>

In some screen readers, "|" separator is being displayed and I want to make it invisible for the screen readers by adding "aria-hidden". Is there any way to add it to the CSS file? Or is there any other way to make a CSS content property invisible for screen readers?

I saw an example of adding ARIA property in square brackets like so:

::after[aria-hidden] {
    content: "|";
    .....
}

However, it would remove the visibility of the whole element completely, not only for screen readers.

Answer 1

As noted, you can't add ARIA attributes via CSS. However, the way I usually do this is have a separate <span> element that uses the CSS content attribute and specify aria-hidden on the <span>.

<style>
  .foo::after {content: "|"}
</style>

<a href="...">some link</a>
<span class="foo" aria-hidden="true"></span>
<a href="...">another link</a>