How to remove underline from text hyperlink?

Question

I got a problem in my css file, I used this following code:

text-decoration: none;

But still it doesnt have effect on text, for some reason I had to use java script for href link behind text. But I think so because of this issue text decoration doesn't has effect on the text. even I can't use different color on text like hover and mouse over color.

Here is code:

 $(function() 
{
$('.maincaptionsmall').wrapInner('<a href="http://google.com"></a>');
});

and here is html code:

<span class="maincaptionsmall">Home</span>

For your information I used text decoration none even inline of href code, but it doesn't has effect.

I'm gonna remove underline from Home text and use different color for mouse over something like this:

:hover { color: yellow; }

Thanks in advance.

Answer 1

CSS for <A> tag

a {text-decoration: none;}
a:hover {color: yellow;}

CSS for <SPAN> tag

.maincaptionsmall a {text-decoration: none;}
.maincaptionsmall a:hover {color: yellow;}

I see it works well on IE9+ and Chrome 14+. Hopes that help :)

Answer 2

Use this

.maincaptionsmall a {text-decoration:none;}
.maincaptionsmall a:hover {color: yellow;}

Answer 3

Try the rule

.maincaptionsmall a {
    text-decoration: none;
}

Answer 4

If its coz due to JSfunction, then you can try using inline css within ur JS

$(function() 
{
$('.maincaptionsmall').wrapInner('<a style="text-decoration:none;" href="http://google.com"></a>');
});