Прозрачное подчеркивание текста при помощи CSS свойства border

Заметка на тему: CSS

В продолжение темы прозрачного фона при помощи CSS параметра background хочу рассказать еще об одной возможности - прозрачного подчеркивания текста при помощи border.

Основная цель CSS свойства border - это создание границы (как правило какого-то цвета) внутри таблицы. Но энтузиасты-верстальщики могу использовать это и для div блоков, и даже для строк. Как раз последнее нам и нужно.

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

Вообще подчеркивание можно сделать элементарно параметром text-decoration: underline; и у строки или ссылки появится подчеркивание. Но тут есть одна особенность, цвет этой линии подчеркивания будет одинаков с цветом самого текста и эту особенность никак не стилизовать.

Но тут на выручку приходит свойство border, в с которого я и начал эту заметку. Для решения описанной мною выше задачи можно просто сделать нижнюю границу (border-bottom) для текста и она будет смотреться 1 в 1 как подчеркивание, которое нам и требуется. Тут можно указать и цвет этой границы/подчеркивания, и даже тип: линия, точки, черточки и т.д. (читайте подробнее про CSS свойство border).

Но я пошел еще дальше, ведь мне нужно было сделать это подчеркивание прозрачным. Тут на выручку пришло все то же rgba, которое использовалось и в прозрачном фоне (я уже упоминал о нем в начале заметки). В общем выглядеть это будет в итоге вот так:


В этом примере показано подчеркивание черным цветом с прозрачностью 30%.

По аналогии можно сделать любую прозрачность для любого цвета, главное найти rgb нужно цвета.

Вот, с прозрачностью для подчеркивания разобрались. Всем удачи с работе с CSS! Если есть какие-то вопросы или дополнения, то буду рад видеть их в комментариях.