Подчеркивание градиентами

Оказывается, подчеркивание можно делать с помощью градиентов.

.test-underline {
  background: linear-gradient(to right, #999, #999 100%);
  background-position: 0 100%;
  background-size: 10px 1px;
  background-repeat: repeat-x;
}

.test-dashed {
  background: linear-gradient(to right, #999, #999 60%, transparent 60%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 10px 1px;
}

.test-dotted {
  background: linear-gradient(to right, #999, #999 50%, transparent 50%);
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 3px 1px;
}

А если нужно просто поменять цвет подчеркивания и не важна поддержка IE, то можно использовать css свойство text-decoration-color.

.test-text-decoration {
  text-decoration: underline;
  text-decoration-color: #999;
}