Как создать подчеркивание под ссылкой (не ссылки)?

Question

[Евгений Иванов]

Как создать подчеркивание под ссылкой, такое как у гугл ( в меню Все Картинки Видео)?
Или как у пека2тв https://goo.gl/hf0Fvf в главном меню.
Пытался найти стиль в коде (просмотр кода элемента), но пока безрезультатно.

Answer 1

[Иван Вишневский]

Делаешь класс какой-нибудь для ссылок, например, 'underlined'.

.underlined{
position: relative;
}

.underlined::after {
content: "";
position: absolute;
bottom: -10px;
left: 0px;
width: 100%;
height: 3px;
background: red; /* Любой цвет на выбор, разумеется */
}

Этот вариант не такой простой, как с border, но предполагает гораздо больше дальнейших возможностей и в целом удобнее.

Answer 2

[Алексей Бурлака]

border-bottom: 2px solid;

Comments

[Евгений Иванов]

Спасибо, но это я знаю.Не настолько же ленив.
Нужен ещё и отступ подчеркивания от ссылки. Ниже написали что нужно.

[Алексей Бурлака]

Нужен ещё и отступ подчеркивания от ссылки.

Нужно сразу писать в вопросе, в чём возникшая сложность.

Делаем элементу display: inline-block и настраиваем padding-bottom: 5px;

В результате обходимся двумя строчками стиля вместо целых двух классов и псевдо-элемента :after