Добавить подчеркивание к тексту, используя подчеркивание текста - CSS

Question

Ниже приведен мой код HTML / CSS, в котором я пытаюсь добавить подчеркивание ниже текста без использования собственного свойства text-decoration: underline.Но почему-то этот код не работает.Любые указатели, что я делаю не так здесь

HTML-код -

<span>
  <a class="test">Add Underline To Text</a>
</span>

CSS-код -

.test {
  position: relative;
  text-decoration: none;
}

.test:hover {
  width: 100%:
}

.test:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px;
  height: 4px;
  background-color: green;
  width: 0;
  transition: width .25s;
}

Codepen Link - https://codepen.io/anon/pen/VEBNyx

Answer 1

Вы хотите добавить width к :after при наведении на ссылку .test?Тогда вам нужно написать test:hover:after { }.Не только test:hover.

Хотя :after является псевдоэлементом, вы должны выбрать его, если хотите изменить его стиль / s

См. Ниже

.test {
  position: relative;
  text-decoration: none;
}

.test:hover:after {
  width: 100%;
}

.test:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px;
  height: 4px;
  background-color: green;
  width: 0;
  transition: width .25s;
}

<span>
  <a class="test">Add Underline To Text</a>
</span>