text-decoration: underline vs border-bottom

Question

What is the difference to use {text-decoration: underline} and {border-bottom: ...}?

which is easy to style and cross browser compatible?

Answer 1

setting your text to display inline (actually, it should be that by default) will cause the border-bottom to render much as a text-decoration rule.

however, i presume that you want to use this technique on links by doing the following:

/* my super eye catching dual colour link */
a {
  color:black;
  border-bottom:1px solid red;
}

which is all well and good, but you'll find that wherever you have an img tag inside a link, the image will have a red border under it.

if you can figure out a way to target the parent of a page element (the image) using existing selectors and no javascript, i'll buy you a beer but i don't think you'll have much luck.

using "text-decoration" avoids this issue altogether as an image is clearly not text, it will not render an underline when inside a link.

if you have complete control over your markup, i suppose you can bumble your way through by adding classes to every link, but if you're working with any popular CMS system, you're going to struggle with this idea.