RGBA
С появлением формата RGBA (Red Green Blue Alpha) в CSS3 можно считать данную проблему решенной. Используя расширенный формат представления цвета, у веб-дизайнеров появилась возможность использовать альфа-прозрачность для цвета.
В отличие от свойства opacity его можно применить и к шрифту и к бордерам и к фону блока без изменения прозрачности содержимого блока. Цветовые значения RGBA являются продолжением цветовых значений RGB только с альфа-каналом — который определяет непрозрачность объекта.
Синтаксис
color: rgba(0,96,160); / * синий цвет */ color: rgba(0,96,160,0.2); / * синий цвет с прозрачностью */
Значение цвета RGBA задается:
RGBA (красный, зеленый, синий, альфа).
Параметр альфа представляет собой число от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
Совместимость
Цветовые значения RGBA поддерживаются браузерами: IE9 +, Firefox 3 +, Chrome, Safari, и Opera 10 +.
Кто внедрил
Данной возможностью сразу же воспользовалась Студия Лебедева, Дизайн-бюро Артёма Горбунова, Илья Бирман… На их сайтах подчеркивание ссылок осталось, но оно стало более изящным.
Пример кода
Ниже привожу фрагменты кода, как сделать подчеркивание тонким и изящным. Естественно, что цвет вы будете указывать тот, который больше подходит вашему сайту.
a:link {
color: #0060a0;
border-bottom: 1px solid;
border-bottom-color: rgba(0,96,160,0.2);
}
a:hover {
color: #d04000;
border-bottom-color: rgba(255,218,202,0.5);
}