Safari 显示 :after 伪元素就像是 :before

【问题标题】：Safari showing :after pseudo-element as if is :beforeSafari 显示 :after 伪元素就像是 :before
【发布时间】：2013-06-15 07:49:00
【问题描述】：

Safari 正在显示我的 :after 伪元素，好像是 :before

Chrome 显示正确，但 Safari 不正确。

它应该在导航上的每个链接之后加上一个正斜杠，除了最后一个，但 Safari 将它们放在每个链接之前。

CSS：

#site-header nav#main-nav #menu li:not(:last-child):after {
  content: "/";
  position: absolute;
  margin-right: 7px;
  line-height: 1;
  bottom: 15px;
}

【问题讨论】：

margin-left 应该只有一个值

标签： css google-chrome safari pseudo-element css-content

【解决方案1】：

您的 CSS 过于复杂。您只需要在原始li 的兄弟之前添加斜线。不需要使用绝对定位，:not伪类：

#menu li + li::before {
    content: "/";
}

看到这个小提琴：http://jsfiddle.net/S93gy/

顺便说一句，您可以使用具有多个 ID 和元素选择器的特定选择器。如果您需要，这将使它们非常难以覆盖。由于 ID 是唯一的，因此在大多数情况下，您只需要使用该 ID 选择器，而不是在其前面使用长字符串，例如 #menu 而不是 #site-header nav#main-nav #menu

【讨论】：