Safari showing :after pseudo-element as if is :before

Question

Safari is showing my :after pseudo-element as if is a :before

Chrome is showing it correctly, but Safari is not.

It is supposed to put a forward slash after every link on the navigation except the last one, but Safari is putting them before each one.

The 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 should only have one value – Turnip Jun 18 '13 at 22:26 — Turnip, Jun 18 '13 at 22:26

score 0 · Answer 1 · answered Jun 18 '13 at 23:58

You CSS is overly complex. You just need to add the slash after before sibling of the original li. You don't need to use absolute positioning, and the :not pseudo class:

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

See this fiddle: http://jsfiddle.net/S93gy/

As an aside, you have incredibly specific selectors with multiple IDs and element selectors. This will make them very difficult to override if you ever need to. As an ID is unique, you in most cases just need to use that ID selector, rather than a long string before it such as #menu instead of #site-header nav#main-nav #menu

Safari showing :after pseudo-element as if is :before

1 Answers1