Как задать ::after после div в виде картинки?

Question

Хочу добавить после каждого div, за исключением первого, стрелочку, но почему-то она не появляется. Что я делаю не так?

.steps-block {
  display: flex;
}

.steps-img {
  width: 100px;
  height: 100px;
  border: 3px solid #ffd200;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.steps-img::after {
  content: "";
  background: url("../img/steps/arrow_curved.png");
}

<div class="steps-block">
  <div class="steps-img"><img src="img/steps/woman-with-headset.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/clock.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/money.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/folded-document.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/calendar.png" alt=""></div>
</div>

И как дополнительный вопрос: как добавить этот ::after ко всем div, кроме первого?

Answer 1

Как я уже написал в комментариях, у вас не указан размер ::after.

.steps-img::after {
  content: "";
  width: 20px; 
  height: 20px;
  background: url("../img/steps/arrow_curved.png");
}

И как дополнительный вопрос: как добавить этот ::after ко всем div, кроме первого?

Есть такой классный рецепт :not(:first-child) (все, кроме первого элемента).

.steps-block {
  display: flex;
}

.steps-img {
  width: 100px;
  height: 100px;
  border: 3px solid #ffd200;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.steps-img:not(:first-child)::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url('https://img.icons8.com/carbon-copy/2x/arrow.png') no-repeat center center / contain;
}

<div class="steps-block">
  <div class="steps-img"><img src="img/steps/woman-with-headset.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/clock.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/money.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/folded-document.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/calendar.png" alt=""></div>
</div>

Ну или ::first-child (первый элемент) и display: none;

.steps-block {
  display: flex;
}

.steps-img {
  width: 100px;
  height: 100px;
  border: 3px solid #ffd200;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.steps-img::after {
  content: "";
  width: 20px;
  height: 20px;
  background: url('https://img.icons8.com/carbon-copy/2x/arrow.png') no-repeat center center / contain;
}

.steps-img:first-child::after {
  display: none;
}

<div class="steps-block">
  <div class="steps-img"><img src="img/steps/woman-with-headset.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/clock.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/money.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/folded-document.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/calendar.png" alt=""></div>
</div>

БЛОГ НА HUSL

Как задать ::after после div в виде картинки?

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