Как сделать подчеркивание у ссылок тонким и красивым

С появлением CSS3, HTML5 и подключению веб-шрифтов сайты стали динамичными, красивыми и более технологичными в процессе разработки.

Многие не любят ссылки подчеркивать и в некоторой степени я их понимаю. Довольно-таки толстые лини хотя и помогают пользователю ориентироваться на сайте и отличать ссылку от обычного текста. Но также и затрудняют чтение.

С появлением формата RGBA можно считать данную проблему решенной. Используя расширенный формат представления цвета, у веб-дизайнеров появилась возможность использовать альфа-прозрачность для цветов.

В отличие от свойства opacity его можно применить и к шрифту и к бордерам и к фону блока без изменения прозрачности содержимого блока. Цветовые значения RGBA являются продолжением цветовых значений RGB только с альфа-каналом — который определяет непрозрачность объекта.

color: rgba(0,96,160); / * синий цвет */
color: rgba(0,96,160,<span style="color: #c25234;">0.2</span>); / * синий цвет с прозрачностью */

Значение цвета RGBA задается: ​​RGBA (красный, зеленый, синий, альфа).

Параметр альфа представляет собой число от 0,0 (полностью прозрачный) и 1.0 (полностью непрозрачный).

Цветовые значения RGBA поддерживаются браузерами: IE9 +, Firefox 3 +, Chrome, Safari, и Opera 10 +.

Данной возможностью сразу же воспользовалась Студия Лебедева, Дизайн-бюро Артёма Горбунова, Илья Бирман… На их сайтах подчеркивание ссылок осталось, но оно стало более изящным.

Подчеркивание ссылок

patpitchaya / Shutterstock.com

Ниже привожу фрагменты кода, как сделать подчеркивание тонким и изящным. Естественно, что цвет вы будете указывать тот, который больше подходит вашему сайту.

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