Как убрать подчеркивание для before{content: ...}?

Question

Внимание: Все точки перед ссылками добавлены с помощью псевдоэлемента ::before!!! Как сделать так чтобы при наведении мышкой было как на левой картинке? HTML код:

.heading {
  margin: 23px;
  font-size: 14px;
  margin-bottom: 10px;
}

.butt_nav {
  display: block;
  text-decoration: none;
  color: black;
  margin: 9px;
  margin-left: 30px;
  font-size: 13px;
}

.butt_nav::before {
  content: '• ';
  font-size: 18px;
}

.butt_nav:hover {
  font-size: 15px;
  text-decoration: underline;
}

<aside class="aside_nav">
  <nav>
    <h5 class="heading">Меню</h5>
    <a href="#" class="butt_nav">Главная</a>
    <a href="#" class="butt_nav">Продукция</a>
    <a href="#" class="butt_nav">Галерея</a>
    <a href="#" class="butt_nav">Заказ и доставка</a>
    <a href="#" class="butt_nav">Контакты</a>
  </nav>


  <nav>
    <h5 class="heading">Статьи и новости</h5>
    <a href="#" class="butt_nav">Сборка и хранение<br>&nbsp;&nbsp;&nbsp;воздушного винта</a>
  </nav>
</aside>

Answer 1

Оберните текст в ссылках span'ами и по ховеру задавайте underline не всей ссылке, а только спану

.butt_nav {
    display: block;
    text-decoration: none;
    color: black;
    margin: 9px;
    margin-left: 30px;
    font-size: 13px;
}

.butt_nav::before {
    content: '• ';
    font-size: 18px;
}

.butt_nav:hover span {
    font-size: 15px;
    text-decoration: underline;
}

<aside class="aside_nav">
  <nav>
    <h5 class="heading">Меню</h5>
    <a href="#" class="butt_nav"><span>Главная</span></a>
    <a href="#" class="butt_nav"><span>Продукция</span></a>
    <a href="#" class="butt_nav"><span>Галерея</span></a>
    <a href="#" class="butt_nav"><span>Заказ и доставка</span></a>
    <a href="#" class="butt_nav"><span>Контакты</span></a>
  </nav>
  <nav>
    <h5 class="heading">Статьи и новости</h5>
    <a href="#" class="butt_nav">Сборка и хранение<br>&nbsp;&nbsp;&nbsp;воздушного винта</a>
  </nav>
</aside>

Answer 2

Можно так

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 24px;
}

.butt_nav {
  text-decoration: none;
  color: black;
  font-size: 18px;
  position: relative;
}

li::before {
  content: '•';
  display: inline-block;
  margin: 0 5px;
}

.butt_nav::before {
  position: absolute;
  display: block;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: black;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease-in-out;
}

.butt_nav:hover::before {
  transform: scaleX(1);
}

<nav>
  <h5 class="heading">Меню</h5>
  <ul>
    <li><a href="#" class="butt_nav">Главная</a></li>
    <li><a href="#" class="butt_nav">Продукция</a></li>
    <li><a href="#" class="butt_nav">Галерея</a></li>
    <li><a href="#" class="butt_nav">Заказ и доставка</a></li>
    <li><a href="#" class="butt_nav">Контакты</a></li>
  </ul>
</nav>


<nav>
  <h5 class="heading">Статьи и новости</h5>
  <li><a href="#" class="butt_nav">Сборка и хранение воздушного винта</a></li>
</nav>

БЛОГ НА HUSL

Как убрать подчеркивание для before{content: ...}?

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