Псевдоэлемент ::after

Question

По заданию надо сделать как на картинке. Раньше иконки отображались сейчас не подтягиваются вообще.

@import "style.css";
@import "faq.css";
.questions {
  background-color: #fff;
  color: #1C1A1A;
  font-weight: 700;
  font-size: 24px;
  padding: 30px 70px;
  margin-bottom: 20px;
}

.element:nth-child(even) {
  color: white;
  background-color: #440F51;
}

.element:nth-child(odd)::after {
  content: "";
  display: block;
  background-image: url(../Go/img/open-purple.svg) no-repeat;
  width: 20px;
  height: 20px;
  float: right;
  margin: 0 6px 0 0;
}

.element:nth-child(even)::after {
  content: "";
  display: block;
  background-image: url(../Go/img/open.svg) no-repeat;
  width: 20px;
  height: 20px;
  float: right;
  margin: 0 6px 0 0;
}

<section>
  <h3>Частые вопросы</h3>
  <ul class="questions">
    <li class="element">Можно ли забронировать комнату онлайн?</li>
    <li class="element">Могут ли вернуть деньги за бронь?</li>
    <li class="element">Какая комната самая популярная?</li>
    <li class="element">Как получить VIP карту?</li>
    <li class="element">Какая комната самая популярная?</li>
  </ul>
</section>

Answer 1

Вы прописываете у background-image - no-repeat, это ошибка. Вам нужно либо использовать backgroud: url(*ссылка*) no-repeat;, либо как у меня в примере каждое свойство отдельно.

Более подробно - ссылка

@import "style.css";
@import "faq.css";
.questions {
  background-color: #fff;
  color: #1C1A1A;
  font-weight: 700;
  font-size: 24px;
  padding: 30px 70px;
  margin-bottom: 20px;
}

.element:nth-child(even) {
  color: white;
  background-color: #440F51;
}

.element:nth-child(odd)::after {
  content: "";
  display: block;
  background-image: url(https://cdn-icons-png.flaticon.com/512/3048/3048122.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
  float: right;
  margin: 0 6px 0 0;
}

.element:nth-child(even)::after {
  content: "";
  display: block;
  background-image: url(https://w7.pngwing.com/pngs/629/116/png-transparent-computer-icons-person-man-miscellaneous-text-people.png);
  background-repeat: no-repeat;
  */ background-size: contain;
  width: 20px;
  height: 20px;
  float: right;
  margin: 0 6px 0 0;
}

<section>
  <h3>Частые вопросы</h3>
  <ul class="questions">
    <li class="element">Можно ли забронировать комнату онлайн?</li>
    <li class="element">Могут ли вернуть деньги за бронь?</li>
    <li class="element">Какая комната самая популярная?</li>
    <li class="element">Как получить VIP карту?</li>
    <li class="element">Какая комната самая популярная?</li>
  </ul>
</section>

БЛОГ НА HUSL

Псевдоэлемент ::after

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