CODEWITHSUNDEEP
htmlcss
NaughtySquid
NaughtySquid

Reputation: 2097

stop links having an underline on a space?

Is there any way in html and css to stop links having an underline where there is a space? Say I want a small icon with a space and then text to all be a link but have no link between them, is it possible?

I don't want to have to have the icon jammed right next to the text :(

Upvotes: 14

Views: 7108

Answers (5)

insertusernamehere
insertusernamehere

Reputation: 23610

Zoltan Toth's solution is very nice and simple. +1 for that. But let me throw in my $0.02 as well. If you don't want to have an extra image tag for an icon in your link, you can also use this:

HTML

<a href="">Some lorem ipsum text</a>

CSS

a {
    vertical-align: top;
}

a:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0;
    background: transparent url(http://lorempixel.com/20/20) no-repeat 0 0;
}

Demo

http://jsfiddle.net/xQAzy/

Upvotes: 1

mavrosxristoforos
mavrosxristoforos

Reputation: 3663

You can either have two separate links (one for the icon and one for the link), or you can set text-decoration: none; to both.

Upvotes: 0

Jan.J
Jan.J

Reputation: 3080

You can do it like this: http://jsfiddle.net/mH6vG/

HTML:

<a><i class="icon-file"></i> <span>My link text</span></a>

CSS:

a > span {
    text-decoration: underline;
}

Upvotes: 1

Zoltan Toth
Zoltan Toth

Reputation: 47687

Add a margin to your image - DEMO

img {
    margin-right: 15px
}

Upvotes: 23

SteveP
SteveP

Reputation: 19103

You can add the icon and the text as two separate links pointing to the same location.

Upvotes: 0

Related Questions