Как сделать подчеркивание текста при помощи CSS, цветом, отличного от цвета текста?

Способ №1

.u-text {border-bottom:1px solid #ccc;}

если бордер уже занят, то псевдоэлементом.
.u-text:after {width:100%; border-bottom:1px solid #ccc;}

Способ №2

{
padding: 10px;
text-decoration: underline;
text-decoration-color: #000000;
}