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

Question

Есть пример, в котором находится внутри блока

Мне нужно, чтобы before элемент был позади <a>, но поверх <div>. У меня совершенно не получается сделать это с помощью z-index, какие есть решения?

.block {
  background: red;
  height: 500px;
  width: 300px;
}


.upload-file {
  background: white;
  display: flex;
  position: relative;
  max-width: 166px;
  color: #59C9A5;
  border: 2px solid #59C9A5;
  padding: 12px;
  font-weight: bold;
  font-size: 14px;
}

.upload-file::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: 2px solid #59C9A5;
}

<div class="block">                     
  <a href="#" class="upload-file" id="upload_file">
     <div class="upload_dots">
       <div class="dot"></div>
       <div class="dot"></div>
       <div class="dot"></div>
    </div>
    <span> Выбрать файл </span> 
  </a>
</div>

Answer 1

.block {
  background: red;
  height: 500px;
  width: 300px;
}

.upload-file {
  display: flex;
  position: relative;
  max-width: 166px;
  padding: 20px;
  border: 2px solid #59C9A5;
  text-decoration: none;
}

.upload-file::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #59C9A5;
}

.upload-file span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  color: #59C9A5;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
}

<div class="block">
  <a href="#" class="upload-file" id="upload_file">
    <div class="upload_dots">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
    <span> Выбрать файл </span>
  </a>
</div>

БЛОГ НА HUSL

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

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