Question

I have a link in which a span is embedded containing a “less than” arrow < followed by a nbsp and some text:

<a href=".."><span class="smallbutton">&lt;</span>&nbsp;back to overview</a>

I want the entire anchor to be gray text except for the < which should be white. The entire anchor should be orange text on hover but I can’t get that to work… I wonder if it’s possible just by using CSS, but I doubt it.

Styling (currently closest attempt):

.smallbutton {
    background-color: #AAAAAA;
    border-radius: 8px 8px 8px 8px;
    color: white;
    display: inline-block;
    height: 20px;
    text-align: center;
    width: 20px;
}
.smallbutton:hover {
    background-color: #DDDDDD;
    color: inherit;
}
a:link, a:visited {
    color: gray;
    text-decoration: none;
}
a:active {
    color: #FC930A !important;
    text-decoration: none;
}
a:hover, a:focus {
    color: #F7C41F !important;
    text-decoration: none;
}

The problem is, I expected the !important to override white but it doesn’t…

Here is the jsfiddle: http://jsfiddle.net/2GX2Y/

The colors that are on the < should be there when just hovering over the containing <a> tag, not just the < itself.

Answer 1

I think if you change

.smallbutton:hover

to

a:hover .smallbutton

then you’ll have what you want. But I may have misunderstood the question.

Just let me know!

Here is the example http://jsfiddle.net/tRRRV/1/