Как псевдоэлемент на задний фон переместить

Question

Учусь верстать. Пробовал через z-index на передний фон вывести текст. Пытаюсь добиться такого результата: Как вывести?

HTML:

<div class="header__navigation">
<nav>
    <ul>
        <li><a href="/portfolio/">Portfolio</a></li>
        <li><a href="/services/">Services</a></li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/blog/" class="nav-rectangle">Get a quote</a></li>
    </ul>
</nav>

SCSS:

nav {
background: orange;
margin: 0;
padding:0 ;
ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
li{
    &:last-child {
      font-weight: bold;
      font-size: 20px;
      line-height: 24px;
      a { 
        z-index: 999;
        &:before{
            content: "";
            background: linear-gradient(99.49deg, #688CE8 5.14%, #A8BBEC 95.22%);
            border-radius: 2px;
            position: absolute;
            width: 45px;
            height: 13px;
            margin-top: 7px;
            z-index: 9;
        }
      }
    }
}

}

Тут код:

https://jsfiddle.net/brilik/xhgf4pn7/14/

Answer 1

nav {
  background: orange;
  margin: 0;
  padding: 0;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav li:last-child {
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
}

nav li:last-child a {
  position: relative;
  z-index: 2; /* add */
}

nav li:last-child a:before {
  content: "";
  background: linear-gradient(99.49deg, #688ce8 5.14%, #a8bbec 95.22%);
  border-radius: 2px;
  position: absolute; /* add */
  bottom: 0; /* add */
  left: 0; /* add */
  width: 45px;
  height: 13px;
  z-index: -1; /* add */
}

<div class="header__navigation">
  <nav>
    <ul>
      <li><a href="/portfolio/">Portfolio</a></li>
      <li><a href="/services/">Services</a></li>
      <li><a href="/blog/">Blog</a></li>
      <li><a href="/blog/" class="nav-rectangle">Get a quote</a></li>
    </ul>
  </nav>
</div>

БЛОГ НА HUSL

Как псевдоэлемент на задний фон переместить

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