css underline

[yoshuawuyts]

http://www.acusti.ca/blog/2014/11/28/towards-a-more-perfect-link-underline/

[yoshuawuyts]

// Colors
$color-accent     : rgb(141, 179, 89);
$color-text-body  : rgb(87, 83, 74);
$color-text-light : rgb(184, 186, 188);
$color-ui-light   : lighten($color-text-light, 14%);

// Set up basic typography
html {
    // 16px * 106.25% = 17px
    font-size: 106.25%;
}
html, body, button, input, select, textarea {
    color: $color-text-body;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 400;
}
body {
  padding: 0 1.5em 1.5em;
}
a {
  color: $color-accent;
}

// Custom link underline
// ---------------------
.has-custom-underline {
  a {
    color: $color-accent;
    text-decoration: none;
    // Underline via gradient background
    background: linear-gradient(to bottom, transparent 49%, $color-accent 50%) repeat-x;
    background-size: 1px 1px;
    // For non-retina screens in Safari, gradient background needs 2 pixels of height to show any underline
    @media (-webkit-max-device-pixel-ratio: 1.49),
           (max-resolution: 143dpi) {
      background-size: 1px 2px;
    }
    background-position: 0 88%;
    // Clear descendors from underline
    text-shadow: 2px 0 white, 1px 0 white, -1px 0 white, -2px 0 white;
    // Style selected links (or else text-shadow makes it look crazy ugly)
    // Pseudo selectors must go separately, or they break each other
    &,
    > * {
      &::selection {
        background-color: lighten($color-accent, 25%);
        color: $color-text-body;
        text-shadow: none;
      }
      &::-moz-selection {
        background-color: lighten($color-accent, 25%);
        color: $color-text-body;
        text-shadow: none;
      }
    }
    &:hover {
      color: darken($color-accent, 11%);
      background-image: linear-gradient(to bottom, transparent 50%, darken($color-accent, 6%) 50%);
    }
  }
  h1, h2, h3, h4, h5, dt, strong, b {
    a {
      background-size: 1px 2px;
      background-position: 0 89%;
    }
  }
}