Really cool linked list bullets

A powerful yet simple solution to taking control of list bullets.

Have you ever wanted to spice up your html menu lists with some more interesting bullets? Of course you have.

Wouldn't it be helpful, though, if you could readily get control over their positioning rather than cajoling those pesky bullet images into place? And while we're at it, how about getting the bullets to actually link to the same url as the link text? And maybe even respond to the mouse-over? Is that really all too much to ask?

It's almost a surprise that the bullets themselves are not part of the link. After all, they should be, shouldn't they? Let's see an example of a standard menu list -

The html <li> list tags that define the bullets are outside the <a> anchor tags, which define the link, like this; <li><a>my‑link</a></li> so the bullet can't possibly be part of the link. I wanted to find a way around this built in limitation.

I needed not just to have my hand-crafted bullet images linked, but to position them precisely on to the link text. I solved the problem with the following surprisingly simple and very effective CSS solution, which I'm childishly pleased with, so I thought it worth sharing.

Create an html menu list in the usual way (see w3schools.com - how to create navigation links for more info). Then apply the following CSS instructions, which work for unordered <ul> and ordered <ol> lists. You may need to modify this code for other types of list.

/* Switch off any list styling */
li {list-style: none;} /* Insert an image at the front of each anchor tag */
li > a::before {
content: url(inhibit path var'my-hand-image.jpg');
/* Position the image */ position: relative; top: 8px;
/* Ensure the image has enough space */ padding: 0 7px 0 0;
} /* Alternative image for the mouse-over event */ li > a:hover::before {
content: url(inhibit path var'my-hand-image-hover.jpg');
}

Pretty self-explanatory. This is the result;-

And if you add ul {display: inline-block;} and  li {float: left;} to your CSS rules, you are well on the way to creating a bulleted horizontal menu like this -

If you are reading this on your phone this menu list may have wrapped onto extra rows, which demonstrates that it has the added advantage of being able to collapse gracefully when the viewport size is reduced for hand-held devices. If you are using a desktop device, try making the width of your browser smaller and watch what happens.

By the way, if you are unfamiliar with the greater than > symbol syntax in this line -

li > a::before {

- it acts as a filter to only add a bullet image to anchor <a> tags that are the immediate children of the list item. Any other anchor tags contained in the list will behave as normal and not end up with an unwanted bullet image. For more information read the post on Child Operators in CSS advanced stylesheets.