Как сделать подобный эффект?

Question

[nen0y]

Как сделать подобный эффект? https://www.eveonline.com/

При hover на текст в шапке, появляется голубая полоска, как сделать подобное?

Answer 1

[igumenov]

https://codepen.io/igumenov/pen/wvvvLPm

Answer 2

[Иван]

изучай сайт при помощи F12 - один из главных инструментов верстальщика/фронтенда.
а вообще, там используются div который отвечает исключительно за верхнюю границу, я бы сделал либо через обычный border к основному div либо через псевдоэлементы after-before

<div class="NavItem_bar__38zjQ"></div>

.NavItem_item__3sDz .NavItem_bar__38zjQ {
    border-top: 1px solid #00aeff;
    margin: -7px 0 6px -1px;
    width: 0;

Comments

[nen0y]

я тыкал на чекбокс :hover, но не нашел стилизацию, по-этому написал сюда, но спасибо всеравно