0

Добрый день! Такая проблема возникла, как правильно сделать, чтобы текст был поверх псевдоэлемента? z-index не помогает, сам не понимаю почему, вот HTML:

.progress {
  background: gray;
  position: relative;
}

.progress:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background: yellow;
}
<div class="progress">
  <span>Шаг 6 из 7.</span>Завершено на 86%!
</div>

1 ответ 1

2

Нужно указать span'y - position: relative:

.progress {
  background: gray;
  position: relative;
}

.progress:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background: yellow;
}

.progress span {
  position: relative;
}
<div class="progress">
  <span>Шаг 6 из 7.</span>Завершено на 86%!
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.