css - 隐藏屏幕阅读器的伪元素？

Question

我正在使用 :before绑定(bind)到特定类的伪元素以在 p 前面添加符号标签，使用这样的 CSS:

td > p.markerclass1:before {
    position: absolute;
    left: -1rem;
    content: '*';
}

我在 Wordpress 主题中使用它，用户可以为 p 选择该类。编辑器中的标记，以便将该符号放在当前段落的左侧。

但是，该网站应该可以访问，并且屏幕阅读器(至少是 NVDA，我正在使用它进行测试)正在读取该伪元素和包含的符号，这是我不想要的。但由于该元素不在 HTML 代码中，我无法添加 aria-hidden = 'true'对屏幕阅读器隐藏它。

知道我能做些什么来让屏幕阅读器忽略那些伪元素吗？

Answer 1

知道这是旧的，但最近也不得不回答这个问题和eventually found a better answer to this question
伪元素；替代文本可以在 / 之后指示:

td > p.markerclass1:before {
  position: absolute;
  left: -1rem;
  content: "*";
  content: "*" / ""; 
}

在这种情况下，空白替代文本将导致此内容被忽略。
备注 not all browsers support this syntax (在撰写本文时基本上只是基于 Chromium 的浏览器)所以请确保首先添加适用于所有浏览器的后备，并且仅被那些支持这种新语法的浏览器覆盖。否则，如果没有这个回退，像 Safari 之类的浏览器只会忽略无法识别的 CSS 行，并且在您使用 / 时无法显示任何内容。替代文字!