link bottom-bordered

Replace standard link underlining with a bottom border.

use-name

scut-link-bb

type

mixin, with default-values placeholder

arguments

$color

default

inherit

A border-bottom-color value. inherit will use the text color.
$style

default

solid

A border-bottom-style value.
$width

default

1px

A border-bottom-width value.

People seem to like this trick, at least some people (I do), because it provides a little extra space between the text and the line. Other pleasing effects are also possible by passing arguments.

Of course, as always, you can add your own rules after the mixin to further customize. For example, if you want to define a special color for the bottom-border on hover, just do it (see Example 2).

example

SCSS

.eg-link-bb-1 a {
  @include scut-link-bb;
  // or @extend %scut-link-bb;
}
.eg-link-bb-2 a {
  color: $eg-muted;
  @include scut-link-bb(inherit, double, 4px);
  &:hover {
    color: $eg-dark;
    border-bottom-color: $eg-light;
  }
}

compiled CSS

.eg-link-bb-1 a {
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.eg-link-bb-2 a {
  color: #CCCCCC;
  text-decoration: none;
  border-bottom-width: 4px;
  border-bottom-style: double;
}
.eg-link-bb-2 a:hover {
  color: #002834;
  border-bottom-color: #9AE9FF;
}

Result

Default values: Link text

Variant values: Link text