Mac端Safari中CSS counter marker样式不生效问题求助

• Mac端Safari对::marker伪元素的自定义属性支持存在兼容缺陷，尤其是自定义list-item计数器格式、绑定交互状态的场景下会直接失效。
• 原代码存在选择器逻辑错误：::marker是列表项<li>的专属伪元素，你写的.menu-item a:hover::marker永远无法匹配到目标元素。

放弃使用兼容性差的::marker方案，改用全浏览器兼容的CSS计数器+::before伪元素实现相同效果，覆盖所有版本Chrome、Firefox、Mac/iOS端Safari。

1. 首先删除原有所有和::marker相关的样式代码
2. 替换为以下CSS代码：

/* 重置列表默认样式，避免原生编号冲突 */
#top-menu ul {
  list-style: none;
  counter-reset: menu-item-counter;
  padding-left: 0;
}

/* 每个菜单项递增计数器，预留编号显示位置 */
#top-menu li {
  counter-increment: menu-item-counter;
  position: relative;
  padding-left: 36px; /* 数值根据你的菜单排版调整，给编号留出足够空间 */
}

/* 用::before伪元素实现自动编号 */
#top-menu li::before {
  content: counter(menu-item-counter, decimal-leading-zero) ".";
  color: #848484;
  font-size: 16px;
  position: absolute;
  left: 0;
  top: 0;
}

/* 当前选中菜单项的编号样式 */
#top-menu .current-menu-item::before {
  color: #FF6436;
}

/* 鼠标悬停时的编号变色效果 */
#top-menu li:hover::before {
  color: #FF6436;
}

• 如果需要实现「仅鼠标悬停在链接文本上时编号才变色」的效果，且不需要兼容Safari 15.4以下版本，可以把hover选择器替换为#top-menu li:has(a:hover)::before；如果要兼容更低版本Safari，直接保留li绑定hover的写法即可，覆盖绝大多数用户场景。
• 编号的位置、间距可以通过调整li的padding-left和伪元素的left/top值适配你的站点排版。

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