How can I add a divider between menu items?

Hi Shane,

You have a few options here. One would be to create a dot graphic, and then add it as a background image via the Background property group. You can positionthe dot using the background-position property. And set background-repeat to no-repeat.

Another option is create an ::after pseudo element. The advantage being that you don’t have to create the dot in a graphics program. The following video shows to to create a pseudo element selector for the dot and then position and style it:

http://somup.com/cFni6mVyA9

Note: many of the CSS styles applied to the pseudo element in the video are necessary to make the pseudo element appear (e.g. setting the content property with empty ‘ ‘, width/height, and position:absolute).

Also, remember to turn off the ::after selector modifier when you next create a selector.

Oh that’s great to hear.

Here’s another video showing how to override the ::after style set on all menu items, on a single menu item:

http://somup.com/cFnQlQVyWw

(create a selector for the single menu item using ::after again, and just set the width to 0 to hide it)

Cheers,
Sebastian