link checker styles

gistfile1.scss

a.checking {
  @include rounded(2px);
  color: #bbb;
  border-bottom:1px dotted #bbb;
  font-size: 15px;
  line-height: 16px;
  position: relative;

  &:before {
    position: absolute;
    top: -15px;
    left: 50%;
    margin-left: -4px;
    width: auto;
    content: "\2b07";
    display: none;
    color: #B3B6BF;
  }

  &:after {
    @include rounded(3px);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
    border:1px solid #B3B6BF;
    display: none;
    position: absolute;
    top: -32px;
    left: 50%;
    margin-left: -125px;
    width: auto;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 0 white;
    padding: 3px 8px 3px 26px;
    color: #58606A;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
    content: attr(href);
    background-repeat: no-repeat, repeat-x;
    background-position: 5px 4px, left center;
    background-image:
      image-url("drafts/layout/loading.gif"),
      -webkit-gradient(linear, 0 top, 0 bottom, from(#E3EAF3), to(#C6D0DB))
    ;
  }

  &.checked.valid{
    color: $link_blue;
    border-bottom: none;
    &:after{
      background-repeat: no-repeat, repeat-x;
      background-position: 8px 7px, left center;
      background-image:
        image-url("drafts/layout/check_marks.png"),
        -webkit-gradient(linear, 0 top, 0 bottom, from(#E3EAF3), to(#C6D0DB))
      ;
    }
  }
  &.checked.invalid{
    color: #E35551;
    border-bottom:1px solid #E35551;
    &:after{
      background-repeat: no-repeat, repeat-x;
      background-position: 8px -22px, left center;
      background-image:
        image-url("drafts/layout/check_marks.png"),
        -webkit-gradient(linear, 0 top, 0 bottom, from(#E3EAF3), to(#C6D0DB))
      ;
    }
  }

  &:hover::after, &:hover::before{ display: block; }
}