I am trying to add a hover effect on my navigation links in my navbar to be a simple filled dot above the highlighted list item. I cannot seem to get anything to work. I had been trying the :before and :after css pseudo selectors. I did get a line to work using a border property as well. Is there a simple way to do this.

html

<div class="navbar">
    <ul>
        <li class="active"><a href="#">link 1></a></li>
        <li><a href="#">link 2></a></li>
        <li><a href="#">link 3></a></li>
        <li><a href="#">link 4></a></li>
    </ul>
</div>

I am trying to add a hover effect on my navigation links in my navbar to be a simple filled dot above the highlighted list item. I cannot seem to get anything to work. I had been trying the :before and :after css pseudo selectors. I did get a line to work using a border property as well. Is there a simple way to do this.

html

<div class="navbar">
    <ul>
        <li class="active"><a href="#">link 1></a></li>
        <li><a href="#">link 2></a></li>
        <li><a href="#">link 3></a></li>
        <li><a href="#">link 4></a></li>
    </ul>
</div>

• javascript
• jquery
• html
• css

Share Improve this question Follow asked May 26, 2014 at 17:26 user1881482user1881482 74622 gold badges1717 silver badges3535 bronze badges 1

• 1 Of course it is simple using before/after elements … add in a little absolute positioning, and you”re there already. – C3roe Commented May 26, 2014 at 17:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Is this what you need ?

ul li:hover:before {
    content: "";
    position: absolute;
    top: -15px;
    background: red;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    left:calc(50% - 8px);
}

and the fiddle.

http://jsfiddle/f7RrW/