Search code examples
cssrollover

Use CSS3 or Javascript to add » to a link on hover

For my menu of a website I want to add text-decoaration on a:hover to be the » sign/symbol.

I tried it like this:

.navbar .nav > li:before > a:hover {
    content: "»";
    padding-right: 10px;
    color: #fff;
}

like a different question suggested, but what displays is the text not the symbol and in its active state. is my CSS wrong or is there a way to do this through Javascript with a rollOver?

And here is my HTML:

<div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="#">Rapid Newsletter Plus</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#features">Features</a></li>
                            <li><a href="#packages">Packages</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                        <ul class="nav pull-right">
                            <li><a href="http://plus.rapidnewsletter.com">&raquo; my Account</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

UPDATE: I tweaked my CSS a lil bit and now the >> shows up in it's text form but it's not translating to the symbol >>. Any thoughts?

.navbar .nav > li > a:hover:before {
    content: "&raquo;";
    color: #fff;
}
Solution

  • It needs to be in Unicode.

    .navbar .nav > li > a:hover:before {
    content: "\00BB";
    color: #fff;
}

    https://r12a.github.io/apps/conversion/ - For future reference convert HTML to various different codes including Unicode here. The bottom right box, called CSS escapes, is the correct one for this purpose.