Сделать подчёркивание ссылки за текстом

Question

Друзья, привет! Нужна помощь. Имею вот такой CSS:

body {background: #ffda00;}
a {
    position: relative;
    color: #00a650; /*задаём цвет ссылки*/
    cursor: pointer;
    line-height: 1; /*задаём высоту строки*/
    text-decoration: none; /*убираем подчёркивание*/
}
a:after {
    display: block;
    position: absolute;
    left: 0; /*изменить на right:0;, чтобы изменить направление подчёркивания */
    width: 0;/*задаём длинну линии до наведения курсора*/
    height: 6px; /*задаём ширину линии*/
    background-color: #ffffff; /*задаём цвет линии*/
    content: "";
    transition: width 0.3s ease-out; /*задаём время анимации*/
    bottom: 5px;
}

a:hover:after,
a:focus:after {
    width: 100%; /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/
}

<a href="#">Контакты</a>

При помощи него делаю нужное подчёркивание, однако оно перекрывает текст, т.к. располагается уровнем выше. Хочу сделать подчёркивание ссылок за текстом, т.е. уровнем ниже, чтобы текст оставался читаемым, а подчеркивание было под текстом. Прикрепляю картинку для наглядности. (если можете подсказать, посмотрев сайт, то реализовано нужное подчеркивание на unit*city (точка вместо *, а на сайте нажмите на гамбургер)

Answer 1

a {
  display: block;
  width: 150px;
  height: 40px;
  background: green;
  text-align: center;
  font-size: 25px;
  text-decoration: none;
  position: relative;
}

span {
  position: relative;
}

a:before {
  content: '';
  display: block;
  width: 0;
  height: 10px;
  background: orange;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition:all .5s;
}

a:hover:before {
  width: 100px;
}

<a href="Link куда-то"><span>Я ссылка</span></a>

Answer 2

надо использовать z-index:

body {
  background: #ffda00;
}

a {
  position: relative;
  z-index: 0;
  color: #00a650;
  line-height: 1;
  text-decoration: none;
}

a::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  width: 0;
  height: 6px;
  background-color: #ffffff;
  transition: width 0.3s ease-out;
  bottom: 5px;
}

a:hover:after, a:focus:after {
  width: 100%;
}

<a href="#">Контакты</a>

Answer 3

Вот на градиенте, без псевдо элементов:

a {
  background: linear-gradient(0deg, wheat 50%, #0000 51%);
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition: 300ms;
  font-size: 40px;
  padding: 0 10px 0 10px;
}

a:hover {
  background-size: 100% 100%;
}

.center {
  background-position: center;
}

.right {
  background-position: right;
}

<a>LEFT</a><br>
<a class="center">CENTER</a><br>
<a class="right">RIGHT</a><br>

БЛОГ НА HUSL

Сделать подчёркивание ссылки за текстом

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