Почему не отображается псевдоэлемент befor?

Question

[jupyter]

Всем привет!
Есть три блока, у каждого сверху псевдоэлемент (отличаются только бэкграундом. )

Всем трем блокам прописал одинаковый код:

.item-ecommerce::before {
  content: "";
  background: url(/img/Icon-Basket.png) no-repeat 15px;
  display: block;
  margin: auto;
  width: 70px;
  height: 70px;
  border: 4px solid #f2d048;
  border-radius: 50px;
  opacity: .8; }

.item-web::before {
  content: "";
  background: url(/img/Icon-Laptop.png) no-repeat 15px;
  display: block;
  margin: auto;
  width: 70px;
  height: 70px;
  border: 4px solid #f2d048;
  border-radius: 50px;
  opacity: .8; }

.item-web::before {
  content: "";
  background: url(/img/Icon-Locked.png) no-repeat 15px;
  display: block;
  margin: auto;
  width: 70px;
  height: 70px;
  border: 4px solid #f2d048;
  border-radius: 50px;
  opacity: .8; }

Проблема:
Проверяю в хроме - первый как влитой встал, второй почему то имеет стили своего before и третьего. Третий элемент вообще без before. В чем мой косяк? Код проверил, все ровно... Спасибо

Answer 1

[Дмитрий Карпов]

Для одного того же элемента .item-web::before, два раза стили прописали

Comments

[jupyter]

хм...вроде все проверил...те где то стиль задвоил?? странно....а еще есть варианты?
проверю сейчас

[jupyter]

не, все норм, проверил

[Rustam Bainazarov]

jupyter, ссылку дайте на ресурс.

[Rustam Bainazarov]

jupyter, а так, по вашим скриншотам и коду, у блока .item-security вообще нет собственного :before с фоном, ибо вообще в коде не вижу правила .item-security:before.

[Дмитрий Карпов]

jupyter, у вас два раза стили для
.item-web::before прописаны, т.е. должен быть соответственно .item-security::before, а его нет

[jupyter]

<section class="wrapper service">
        <div class="container">
          <h2 class="heading-2">services</h2>
          <p class="heading-2-sub">Proin iaculis purus consequat sem cure.</p>
          <div class="service__list">
            <div class="service__item item-ecommerce">
              <h3 class="heading-3 service__name">E-Commerce</h3>
              <p class="service__description">
                Proin iaculis purus consequat sem cure <br> digni ssim. Donec porttitora entum suscipit <br> aenean rhoncus posuere odio in tincidunt.
              </p>
            </div>

            <div class="service__item item-web">
              <h3 class="heading-3 service__name">Responsive Web</h3>
              <p class="service__description">
                Proin iaculis purus consequat sem cure <br> digni ssim. Donec porttitora entum suscipit <br> aenean rhoncus posuere odio in tincidunt.
              </p>
            </div>

            <div class="service__item item-security">
              <h3 class="heading-3 service__name">Web Security</h3>
              <p class="service__description">
                Proin iaculis purus consequat sem cure <br> digni ssim. Donec porttitora entum suscipit <br> aenean rhoncus posuere odio in tincidunt.
              </p>
            </div>
          </div>
        </div>
      </section>

.wrapper {
  margin-top: 120px;
  margin-bottom: 120px; }

.heading-2 {
  font: 700 40px "Montserrat", sans-serif;
  color: #222222;
  text-transform: uppercase;
  letter-spacing: -1px;
  margin-bottom: 20px; }

.heading-2-sub {
  font: 16px "Droid Serif", sans-serif;
  color: #767676;
  margin-bottom: 80px; }

.service__list {
  display: flex;
  justify-content: space-between; }

.service__description {
  font: 14px "RobotoSlab", sans-serif;
  color: #777777;
  letter-spacing: -0.35px; }

.heading-3 {
  font: 700 18px "Montserrat", sans-serif;
  color: #222222;
  letter-spacing: -0.45px;
  margin-bottom: 20px;
  margin-top: 25px; }

.item-ecommerce::before {
  content: "";
  background: url(/img/Icon-Basket.png) no-repeat 15px;
  display: block;
  margin: auto;
  width: 70px;
  height: 70px;
  border: 4px solid #f2d048;
  border-radius: 50px;
  opacity: .8; }

.item-web::before {
  content: "";
  background: url(/img/Icon-Laptop.png) no-repeat 15px;
  display: block;
  margin: auto;
  width: 70px;
  height: 70px;
  border: 4px solid #f2d048;
  border-radius: 50px;
  opacity: .8; }

.item-web::before {
  content: "";
  background: url(/img/Icon-Locked.png) no-repeat 15px;
  display: block;
  margin: auto;
  width: 70px;
  height: 70px;
  border: 4px solid #f2d048;
  border-radius: 50px;
  opacity: .8; }

[Rustam Bainazarov]

jupyter, ну так у вас .item-web два раза идёт.

[Rustam Bainazarov]

jupyter, прошу:

.wrapper {
  margin-top: 120px;
  margin-bottom: 120px; }

.heading-2 {
  font: 700 40px "Montserrat", sans-serif;
  color: #222222;
  text-transform: uppercase;
  letter-spacing: -1px;
  margin-bottom: 20px; }

.heading-2-sub {
  font: 16px "Droid Serif", sans-serif;
  color: #767676;
  margin-bottom: 80px; }

.service__list {
  display: flex;
  justify-content: space-between; }

.service__description {
  font: 14px "RobotoSlab", sans-serif;
  color: #777777;
  letter-spacing: -0.35px; }

.heading-3 {
  font: 700 18px "Montserrat", sans-serif;
  color: #222222;
  letter-spacing: -0.45px;
  margin-bottom: 20px;
  margin-top: 25px; }

.item-ecommerce::before {
  content: "";
  background: url(/img/Icon-Basket.png) no-repeat 15px;
  display: block;
  margin: auto;
  width: 70px;
  height: 70px;
  border: 4px solid #f2d048;
  border-radius: 50px;
  opacity: .8; }

.item-web::before {
  content: "";
  background: url(/img/Icon-Laptop.png) no-repeat 15px;
  display: block;
  margin: auto;
  width: 70px;
  height: 70px;
  border: 4px solid #f2d048;
  border-radius: 50px;
  opacity: .8; }

.item-security::before {
  content: "";
  background: url(/img/Icon-Locked.png) no-repeat 15px;
  display: block;
  margin: auto;
  width: 70px;
  height: 70px;
  border: 4px solid #f2d048;
  border-radius: 50px;
  opacity: .8; }

[jupyter]

Рустам Байназаров, в том то и дело что прописано. Проверил папку scss - блок есть, стили у каждого блока тоже, собирается галпом без ошибки. Итоговый css прислал вам.
А в итоге, в хроме косяк такой - третий элемент без after, второй с двумя after...

[Rustam Bainazarov]

jupyter, ну тогда проверяйте ваш SCSS-исходник. Или сюда его пришлите.

[jupyter]

Рустам Байназаров, спасибо, кранты)...вот вообще сижу - и в упор не вижу...((
простите за беспокойство...

[Rustam Bainazarov]

jupyter, таки разобрались?

[jupyter]

просто не заметил, сори. Копи паст зло)!!
Сори что побеспокоил

[jupyter]

Рустам Байназаров, да, спасибо. задвоил запись, копи паст))

[Rustam Bainazarov]

jupyter, LOLOLOL, ну слава Богу :))

Отметьте человеку и этот ответ как решение, он тоже правильно написал ведь.

[jupyter]

Рустам Байназаров, всем отметил. Спасибо.

Answer 2

[Андрей Dobrin]

Вместо классаitem-web в третьем элементе напишите item-security в стилях:

.item-web::before {
  content: "";
  background: url(/img/Icon-Laptop.png) no-repeat 15px;
  display: block;
  margin: auto;
  width: 70px;
  height: 70px;
  border: 4px solid #f2d048;
  border-radius: 50px;
  opacity: .8; }

.item-security::before {  < ----- CЮДА
  content: "";
  background: url(/img/Icon-Locked.png) no-repeat 15px;
  display: block;
  margin: auto;
  width: 70px;
  height: 70px;
  border: 4px solid #f2d048;
  border-radius: 50px;
  opacity: .8; }

Comments

[Андрей Dobrin]

Я уже поменял, можете скопировать этот код и попробовать)