Как добавить подчеркивание ссылок используя css

Подчеркивание ссылок можно сделать двумя способами.
Способ первый это использовать свойство text-decoration

a {text-decoration: underline;}

Ссылка при этом выглядит так: ссылка


Второй способ это использовать свойство border-bottom

a {border-bottom:1px solid;}

Ссылка с нижним бордером будет выглядеть так ссылка Обратите внимание, если не указать после значения свойства dotted цвет ссылки, то линия подчеркивания будет того же цвета, что и сама ссылка. Цвет обычно указывается в 16-ричном формате #FF00CC


Второй способ имеет плюсы перед первым в том, что линию подчеркивания мы можем, например, сделать другого цвета

a {border-bottom:1px solid red;}

Линия подчеркивания красного цвета ссылка


У линии мы можем изменить отступ добавив свойство padding-bottom

a {border-bottom:1px solid red; padding-bottom:11px;}

Линия подчеркивания красного цвета + отступ в 11 пикселей ссылка


Линию подчеркивания мы можем сделать с помощью точек dotted

a {border-bottom:1px dotted red;}

Линия подчеркивания точками ссылка


Либо пунктиром dashed

a {border-bottom:1px dashed red;}

Линия пунктиром ссылка


Двойным подчеркиванием double

a {border-bottom:4px double red;}

Двойное подчеркивание у ссылки ссылка