How can I add a divider between menu items?

Tagged: ,

Author Posts


I am looking for a way to add a dot • between menu items in the main menu.

Would appreciate some help 🙂




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:

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.


Thanks so much! That was super helpful. How can I get the last-child not to have the dot though? I tried to do it using the same principles in the video, but couldn’t seem to get it right.


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:

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



Perfect! Thanks Sebastian 🙂

You must login or register to reply to this topic.