speak:none已废弃，如何禁止屏幕阅读器读取伪元素:before/:after内容？

由于无法修改HTML结构，且speak:none已被废弃，你可以通过以下几种方法阻止屏幕阅读器读取伪元素的箭头内容：

方法1：用CSS绘制箭头（无文本内容） #

避免在content中使用可被读取的字符，改用CSS边框绘制箭头。这样伪元素没有文本内容，屏幕阅读器自然不会读取。

.with-arrow:after {
  content: '';
  /* 绘制向右箭头，可根据需求调整尺寸和颜色 */
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  margin-left: 4px; /* 控制箭头与按钮文本的间距 */
}

方法2：使用speak: never属性 #

CSS Speech Module Level 1中用speak: never替代了废弃的speak:none，直接指定伪元素内容不被屏幕阅读器读取：

.with-arrow:after {
  content: '→';
  speak: never;
}

目前主流浏览器和屏幕阅读器（如NVDA、VoiceOver）已支持该属性，兼容性较好。

方法3：视觉隐藏文本但保留箭头显示 #

通过将伪元素的文本内容移出屏幕阅读器的可访问范围，同时用CSS绘制箭头模拟视觉效果：

.with-arrow:after {
  content: '→';
  /* 将文本移出可视区域，屏幕阅读器不会读取 */
  text-indent: -9999px;
  /* 用CSS绘制箭头覆盖原文本位置 */
  position: absolute;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-left: 4px;
  margin-top: 3px;
}
.with-arrow {
  position: relative; /* 让伪元素的absolute定位基于按钮 */
  padding-right: 16px; /* 预留箭头空间，避免溢出 */
}

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