使用 aria-hidden 对屏幕阅读器隐藏伪元素？

Question

:after我有一个网站，其中使用带有 unicode 字符的伪元素\\2192（向右箭头：\xe2\x86\x92）附加了很多链接。

\n\n

由于伪元素无法使用 JS 操作，也无法aria-hidden="true"通过 CSS 应用属性，因此如何对屏幕阅读器隐藏这些元素？

\n\n

我无法真正更改标记，因为每当用户在包含链接的 CMS 中发布广告内容时，我都需要动态添加箭头。

\n\n

下面是它的实现方式：

\n\n

p a:after {\n    content: \' \\2192\';\n}\n

\n

Answer 1

我仍然不完全理解你的问题，因为代码有点短，但这是一个可能的解决方案。您可以创建一个“箭头”类并切换它（通过单击或您想要的任何方式），以便您的伪元素可以像其他任何元素一样添加或删除。

function myFunction(el) {
    el.classList.toggle("arrow");
}

.arrow:after{
  content: ' \2192';
}

<div>
<p><a class="arrow" href="#" onclick="myFunction(this)">CONTENT</a></p>
</div>

如果这不是您想要的，请告诉我，我会在进一步解释您的问题后提出其他解决方案。