CSS Triangle Hover Border Issue

Question

Using the following code

<ul id="leftNavUl"> 
    <li><a href="#">Colors</a></li>
    <li><a href="#">Typography</a></li>
    <li><a href="#">Buttons</a></li>
    <li><a href="#">Main Navigation</a></li>
    <li><a href="#">Alerts</a></li>
    <li><a href="#">Data Tables</a></li>
</ul>

I'd like the hover to show a triangle / arrow at the end of each border to the right.

I have implemented the following code

#leftNavUl li:hover{
    display: inline-block;lock;
    position: relative;
    background: #97cce9;
    padding: 15px; width:100%;}

#leftNavUl li:after{
    content: '';
    display: block;  
    position: absolute;
    left: 100%;
    top: 0%;
    margin-top: -10px;
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 30px solid #97cce9;
}

While the hover works, there is an extra triangle/arrow visible on the outside of the div.

Answer 1

you should triger the after element only on the hover state.

Like #leftNavUl li:hover:after

And carfule you got a typo on you first class : display: inline-block; lock;

See code below : https://jsfiddle.net/d6h0xtup/2/