Question

Link to the site

Is there a way to limit background area on hover? (I am talking about breadcrumbs) On hover background is covering arrow and area after it? Is there some way to limit this?

This is html part of the code:

 <div id="breadcrumbs">
                <ul>
                    <li class="arrow-e"><a href="#">Home</a></li>
                    <li><a href="#">Article</a></li>
                    <li><a href="#">Gaming</a></li>
                    <li><a href="#">Lorem Ipsum</a></li>
                </ul>
                <div class="clear"></div>
            </div><!-- END OF DIV BREADCRUMBS -->    

And CSS code:

  #breadcrumbs {background: rgb(242, 242, 242); height: 100%;padding: 0 0 0 10px}
#breadcrumbs ul {margin: 0}
#breadcrumbs li {background-image: url(../img/icons/arrow.png);background-repeat: no-repeat;background-position: right;display: block;float: left;font-size: 1.35em;text-align: center; text-transform: uppercase;margin: 0;padding: 6px 40px 6px 5px;}
#breadcrumbs li:last-child{background-image: none}
#breadcrumbs li:hover{background: rgba(120,27,32,.9);}
#breadcrumbs li:hover a, #breadcrumbs a:hover, .current a{color: white;text-shadow:0px 0px 1px #696969}

Answer 1

you do like this:

HTML:

<ul>
    <li>bla</li>
    <li>text1</li>
    <li>text2</li>
<ul>

CSS:

ul{
    list-style:none;
    overflow:hidden;
}
li{
    position:relative;
    width:70px;
    height:30px;
    float:left;
    margin-right:20px;
}
li:after{
    content:'';
    background:red;
    width:20px;
    height:30px;
    top:0;
    right:-20px;
    display:block;
    position:absolute;
}
li:hover{
    background:green;
}

http://jsfiddle.net/ECcaJ/

or

HTML

<ul>
    <li>bla<span></span></li>
    <li>text1<span></span></li>
    <li>text2<span></span></li>
<ul>

CSS

li span{
    background:red;
    width:20px;
    height:30px;
    top:0;
    right:-20px;
    display:block;
    position:absolute;
}
li:hover{
    background:green;
}

http://jsfiddle.net/ECcaJ/1/