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

Question

我有一个站点，其中许多链接使用带有Unicode字符:after（向右箭头：→）的\2192伪元素附加。

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

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

这是它的实现方式：

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

Answer 1

知道这很旧，但是最近也必须回答这个问题，eventually found a better answer to this question

伪元素；替代文字可以在/：

之后表示

.expandable::before {
  content: "\2193" / ""; 
}

在这种情况下，空白的alt文本将导致忽略此内容。

Admittedly support isn’t great at the moment（仅基于Chromium的浏览器），但希望会有所改善。在此之前，您应该添加一个不带Alt文本的后备广告，或者像Safari这样的浏览器忽略整行：

.expandable::before {
  content: "\2193"; 
  content: "\2193" / ""; 
}

Answer 2

我仍然不完全了解您的问题，因为代码有点短，但这是可能的解决方案。您可以创建一个“箭头”类并对其进行切换（onclick或根据需要），以便可以像其他任何元素一样添加或删除您的伪元素。

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

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

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

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