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

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

.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;
}