Иван

Не совсем понимаю, а в чем проблема?

изучай сайт при помощи 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;

Scss

.some-block:hover {
background-color: red;

.another-block {
background-color: red;
    }
}

вообще раньше действительно всё верстали на дивах. но сейчас это не особо популярно. поэтому если вы можете обойтись без лишнего дива - не используйте этот див.
p.s возможно автор вашего курса в ютубе просто прожженный верстальщик со стажем 20+ лет и не хочет бросать верстать на дивах.

svg проблематичный достаточно.
почитай эти ресурсы, возможно, где-то здесь ты и надёшь ответ. тык и тык