Search code examples
htmlcsstwitter-bootstrapstylesheet

hover on :before pseudo elements

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).

Solution

  • 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.