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

Question

[Антон Волк]

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

Comments

[Антон Волк]

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

.horizontal-menu{
background: #E8D5BA;
}

.horizontal-menu li{
	display:table-cell;
}

.horizontal-menu li a{
    display: block;
	width: 1000px;
	height: 50px;
        text-align: center;
	vertical-align: middle;
	display: table-cell;
	font-size: 21px ;
	font-weight: bold;
	color:#231F20;
	text-decoration: none; 
}

.horizontal-menu li a:before,
.horizontal-menu li a:after {
     content: " - "; 
}

Scrum Scrum
Ваш совет не работает в данной ситуации..
Возможно я по кривому реализовал верстку меню)

[Алексей Уколов]

Антон Волк: Ну так у вас же есть еще li - задайте ему псевдоэлементы. Я бы на вашем месте перенес " - " на в псевдоэлементы li, а подчеркивание при наведении сделал так, как советует Scrum

[Ivan Demidov]

jsfiddle.net/Scrum/vkLe1tbd

[Антон Волк]

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

[Алексей Уколов]

Антон Волк: Ну возьмите и сделайте как вам нужно, принцип вам показали. Или вы со Scrum зарплатой готовы поделиться?

[Ivan Demidov]

Антон Волк: поменяйте значение top: 100% на bottom: 0

[Антон Волк]

Со всем разобрался, вот только остался 1 вопрос, как сделать так, что бы подчеркивание подстраивалось под ширину названия категории? так как например каталог (7 символов) и наш сервис (10 символов) разной ширины.

[Ivan Demidov]

Для такого эффекта придется еще обернуть елемент A к примеру span(style="inline-block") и уже ему назначить правила подчеркивания при наведение jsfiddle.net/Scrum/vkLe1tbd/1

[Антон Волк]

Scrum: Спасибо огромное

Answer 1

[Ivan Demidov]

Писал на коленке.

a { position: relative; }
a::after {
    content: '';
    left: 5px;
    right: 5px
    top: 100%;
    height: 5px;
    backgroun-color: transparent;
    border-radius: 50%;
    position: absolute;
}
a:hover::after { background-color: chocolate; }

Answer 2

[Назар Мокринский]

Добавляйте псевдо-элемент ::after при наведении с нужной стилизацией.

Answer 3

[SagePtr]

Ай-ай-ай, выкладываете картинку с вредоносного хостинга?

Comments

[Антон Волк]

буду знать на будущее