Как правильно добавить стрелочку?

Question

Подскажите как правильно добавить стрелочку к пункту меню справа, чтобы она было в общем размере ссылки и при наведении на ссылку появлялся border-bottom, который выделял бы текст ссылки и стрелочку?

<li id="menu-item-171" class="arrow-menu menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-171"><a href="##">Направления</a>
  <ul class="sub-menu">
    <li id="menu-item-248" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-248"><a href="http://yandex.ru">Яндекс</a></li>
  </ul>
</li>

Answer 1

ul{
    list-style: none;
}

ul li ::after{
    content: " →";
}

ul li :hover{
    border-bottom: 1px solid red;
    color: blue;
}

a{
    text-decoration: none;
    color: black;
}

  
    <ul class="sub-menu">
      <li class="yandex"><a href="http://yandex.ru">Яндекс</a></li>
    </ul>

БЛОГ НА HUSL

Как правильно добавить стрелочку?

Ответы (1 шт):