Smart underlines for good typography - http://jsbin.com/rafoko

smartunderline.jade

html
  head
    meta( charset = 'utf-8' )
    link( href = 'http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic', rel = 'stylesheet', type = 'text/css')

  body
    #container.
      What I would really like <u>to see on the web is beautiful typography</u> mixed in with simple, responsive content and <strong>beautiful images</strong>.

smartunderline.less

u {
  text-decoration: none;
  text-shadow:
    -2px -2px 0 white,
    2px -2px 0 white,
    -2px 2px 0 white,
    2px 2px 0 white;
  
  background-image: linear-gradient(
    to top,
    transparent,
    transparent .12em, // Bottom from bottom
    #333333 0,        // Space between the two
    #333333 .19em,     // Top from bottom,
    transparent 0);
}

#container {
  padding: 1rem;
  background: white;
  font-family: Lora;
  font-style: italic;
  font-size: 1.8rem;
}