← #28 Set content for an empty link
#29

Separate list items

Topics: CSS

The content property of the :after selector can be used to separate list items:

/* Inline items */
span:not(:last-child):after {
content: " • ";
}

/* List items */
li:not(:last-child):after {
content: ",";
}

The footer of this website uses the same technique.

Demo

Inline items:
CSSJavaScriptHTMLTypeScript

List items:

  • CSS
  • JavaScript
  • HTML
  • TypeScript

More

Fix a typo or suggest an improvement
#30 Remove the border from the last navigation item