Как реализовать данный hover на блоке?

Question

[verstak4444]

Всем привет знатоки верстки!подскажите,как реализовать такой способ при наведении он же hover?чтоб одновременно циферка и область border на ширину блока подсвечивалась. На картинке блок выделил рамкой
Вот примерчик моего говнокодика

https://codepen.io/anon/pen/YeVZpY

Answer 1

[Максим]

https://codepen.io/Melagomania/pen/qxmmvw

Comments

[verstak4444]

а зеленый hover снизу как правее сместить?

[Максим]

Внутренними отступами. Ну ты уже увидел наверно, как Андрей сделал)

[verstak4444]

Максим, а я чето думал что это маргины между блоками

[Максим]

verstak4444, нет, ты же не можешь ВНЕШНИМ отступом сделать блок шире/выше (и таким образом сделать border длиннее). А вот внутренний отступ может повлиять на размеры блока, тем самым увеличивая border этого блока.

[verstak4444]

Максим, или может список это?

[Максим]

verstak4444, можно и списком сделать, наверно так будет логичней https://codepen.io/Melagomania/pen/qxmmvw

[verstak4444]

Максим, а как вообще такая штука называется?

[Максим]

verstak4444, не припоминаю, чтоб у неё было какое-то отдельное название. Я бы называл это списком.

[verstak4444]

Максим, понятно но вот пока немогу справиться с одновременным ховером цифры и нижнего бордера,ну ладно буду пробовать

Answer 2

[Андрей Саныч]

Немного измененный ответ Максим
https://codepen.io/anon/pen/qxmjPE

Comments

[verstak4444]

а как ширину border под ширину блока подогнать?

[Андрей Саныч]

verstak4444, так там уже все подогнано)