CSS → Линии с помощью linear-gradient

Благодаря тому, что градиент это фоновое изображение, ему (градиенту) можно задавать такие параметры как — размер, повторяемость и позицию. Таким образом для вывода линии достаточно создать одноцветный градиент нужного размера.

Пример подчёркнуто текста:

.underline {
  background-image: linear-gradient(black, black);
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
}

Демо

Пример двойного подчёркивания:

.double-underline {
  background-image: linear-gradient(black, black), linear-gradient(black, black);
  background-size: 100% 1px, 100% 1px;
  background-position: left bottom, left bottom 3px;
  background-repeat: no-repeat;
}

Демо

Пример dotted подчёркивания:

.dotted-underline {
  background-image: linear-gradient(to right, black 1px, transparent 1px);
  background-size: 3px 1px;
  background-repeat: repeat-x;
  background-position: 0 bottom;
}

Демо

Пример диагональной линии:

.diagonal-line {
  background-image: linear-gradient(145deg, transparent 50%, black 50%, transparent 52%);
  background-repeat: no-repeat;
}

Демо

Способ создания анимированных полосок.