hover on :before pseudo elements

Question

I have this navigation menu and I need the circle bullets in front of each line. The HTML code is here

http://jsfiddle.net/qhoc/yY84q/1/

<ul>
   <li>
       <a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
   </li>
   <li>
       <a>Aliquam tincidunt mauris eu risus.</a>
   </li>
   <li>
       <a>Vestibulum auctor dapibus neque.</a>
   </li>
</ul>

CSS code:

li{list-style-type:none;}
li:before{content:'\00b7'; font-size:100px; line-height:24px; vertical-align:middle;}

li:hover {
    background:gray;
}

li a {
    cursor:pointer;
}

As you can see, when I hover on the bullets themselves, the gray selection is wrong. It jumped to menu item below. Plus it's not a part of <a> anymore so I cannot click if my mouse on top of the circle bullets.

So how to fix this problem without adding js code or changing the HTML structure?

Note 1: That navigation menu is the sidebar-nav here since I abstracted to make it easy to read: http://flatstrap.org/examples/fluid.html

Note 2: One ugly alternative I was thinking is to make the bullets as the background image. But that means I have to create tons of images since there are variations of color and I have to do it for white and gray background (:hover). I rather not do this.

Note 3: I need the big round bullet like in original code (it's UI design).

Answer 1

See The Demo here

Just Replace li:before with li a:before so you can have the link over your bullet to. And also for CSS HEX VALUE use this '\2022'

li{list-style-type:none;}
li a:before{content:'\2022'; font-size:40px;line-height:0;vertical-align:middle;}

li:hover {
    background:gray;
}

li a {
    cursor:pointer;
}

Answer 2

The circle isn't part of the link because you set the :before pseudo element on the li. Set it the the actual a and it'll be part of the link.

As for the issue with jumping background colors; this happens because of your absurd font-size and non-matching line-height. Either find a larger circle symbol or create a circle with CSS.

Here's a fork of your JS Fiddle with a CSS circle instead.