Question

I have a simple navigation bar that looks something like this:

<ul class="navigation">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="contact.html">Contact Us</a></li>
</ul>

So a very simple navigation. When a user hovers over one of the links I’d like to add squiggly brackets on either side of the link text as in:

Home {About Us} Prodcuts Contact Us

The way I thought is that I could do this in javascript, adding onClick=”navAnimation(‘TheLinkName’)” on each tag. Then in the JS I just get the innerHTML of the given link tag and add the squigglys on either side of the text.

Is this the best way to do it? It seems like quite alot of work for something so trivial..

Thanks!

Answer 1

You can do this with just CSS, using pseudo elements:

ul.navigation a:hover:before { content: "{"; }
ul.navigation a:hover:after { content: "}"; }