a:hover

[aoeui]

hi,

what is your personal preference for styling links?

a {color: #F90;}

a:hover {border-bottom: 1px solid #F90;

or

a:hover {text-decoration: underline;

[noahgelman]

Depends. I’d always go underline if it was inline as not to potentially mess something up. But if the design called for it I’d use border and padding. Also, text-decoration, border, and outline can be combined for a very interesting effect

[joshuanhibbert]

@noahgelman Border and padding don’t mess anything up at all as a link is inline by default. Here is an extreme example to illustrate my point: http://jsfiddle.net/sl1dr/xVaUQ/

@krysak4ever In regards to your question, I have no default. It changes almost every project, depending on the project.

[noahgelman]

@sl1dr , but you can already see it messed up, the line goes all the way to the text below it, that’s what I meant. That combined with any number of inherited styles can make things look really goofy. Text-decoration isn’t really affected by anything else which is why it’s safer to use.

[chrisburton]

http://jsfiddle.net/xVaUQ/1/

p.s. (sentence)

[joshuanhibbert]

@noahgelman @ChristopherBurton My example was ‘extreme’ to illustrate the point. Obviously you wouldn’t use that in anger.

[chrisburton]

@sl1dr: Your point was purely simple, I understood it quite well.

I think @noahgelman is mentioning the difference in pixels between the two away from the text. However, I’m not sure how it may “mess something up” as it doesn’t break anything. Sure there is a difference in pixels away from the text but that’s probably the only argument. Also, you don’t notice as much when text-size becomes larger.

[joshuanhibbert]

@ChristopherBurton That is why I did up the demo, to illustrate that nothing breaks, you just portrayed that much better than I did though! Thanks for the clarification.

[noahgelman]

Sorry, I suppose saying “mess something up” was a bit vague and sounded more of a bug creating issue.

I meant it from a purely design standpoint. Can you do it? Sure. Does it break anything? No.

But you’re less likely to get the desired affect if your goal is to underline the text (which I assumed was the goal since he compared border to text-decoration) since border’s purpose isn’t really made to underline text.

Although border is much more flexible so if the design calls for it, go for it. I change the width, color or style of the underline when you use text-decoration.

[joshuanhibbert]

@noahgelman The main reason I prefer using a border is that it doesn’t ‘cut through’ the text like using underline does. But it really isn’t that big of a deal either way.

[Author]

Posts