能否为CSS content属性添加aria-hidden？装饰分隔符无障碍适配

首先明确：无法通过CSS为伪元素添加aria-hidden属性，因为aria-hidden是HTML属性，而伪元素不属于DOM节点，CSS只能控制样式，不能给元素添加HTML属性。你之前尝试的::after[aria-hidden]是属性选择器，作用是选中带有aria-hidden属性的元素的::after伪元素，并非给伪元素添加该属性，所以达不到预期效果。

下面提供几种可行的解决方案：

方法一：使用CSS语音合成属性隐藏内容 #

给伪元素添加speak: none;，直接告诉屏幕阅读器不要朗读该伪元素的内容：

span::after {
  content: "|";
  speak: none;
  /* 其他原有样式 */
}

注：该属性在现代浏览器中支持良好，若需兼容老旧环境，可搭配其他方法使用。

方法二：用边框替代文本分隔符 #

放弃用文本|做分隔，改用CSS边框实现视觉分隔，彻底避免屏幕阅读器读取文本内容：

/* 给除最后一个链接外的所有链接添加右边框作为分隔 */
span a:not(:last-child) {
  border-right: 1px solid #你的分隔符颜色;
  padding-right: 0.5em; /* 控制边框与右侧链接的间距 */
  margin-right: 0.5em;
}

这种方案更符合无障碍设计原则，装饰性分隔符用视觉样式实现而非文本，从根源上避免了屏幕阅读器读取无关内容的问题。

方法三：调整HTML结构，用隐藏的文本分隔符 #

如果必须保留文本|的形式，可以修改HTML，直接添加分隔符并设置aria-hidden：

<span>
  <a href="...">Link1</a>
  <span aria-hidden="true">|</span>
  <a href="...">Link2</a>
</span>

这种方式虽然需要修改HTML，但兼容性最好，能确保所有屏幕阅读器都忽略分隔符。

内容的提问来源于stack exchange，提问作者ABC