CSS伪元素:before和:after在iOS设备上无法显示的问题咨询

首先看你给出的代码，第一个选择器缺少开头的.，正确写法应该是.accordion .accordion__title:before，这个语法错误会直接导致样式失效，很可能是核心问题之一。

除了语法修正，针对iOS上伪元素渲染的常见兼容坑，还可以尝试这些方案：

• 确保父元素.accordion__title设置position: relative，因为伪元素使用了position: absolute，必须依赖父元素的定位上下文才能正确显示位置。
• 给伪元素添加z-index: 1（或更高值），避免被其他元素遮挡。
• 把display: block改为display: inline-block，部分iOS版本对block类型的伪元素渲染存在异常。
• 将content: ''改为content: ' '，部分iOS浏览器对空内容的伪元素渲染稳定性较差。

修正后的完整示例代码：

.accordion .accordion__title {
  position: relative; /* 给伪元素提供定位上下文，必须添加 */
  padding-right: 20px; /* 给符号预留空间，避免和文字重叠 */
}

.accordion .accordion__title:before,
.accordion .accordion__title:after {
  content: ' ';
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 10px; /* 调整位置，避免过于贴边 */
  width: 14px;
  height: 2px;
  background: #000;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  -webkit-transition: transform .4s;
  transition: transform .4s;
  z-index: 1;
}

/* 可选：实现+转-的展开/收起效果 */
.accordion .accordion__title.active:after {
  -webkit-transform: translate(0, -50%) rotate(90deg);
  transform: translate(0, -50%) rotate(90deg);
}

另外，当前iOS Safari已支持不带前缀的transform和transition，可以只保留-webkit-前缀和标准写法，无需保留-moz-/-ms-/-o-这类针对旧浏览器的前缀。

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