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

Question

jupyter @jupyter

CSS

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

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

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

.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. В чем мой косяк? Код проверил, все ровно... Спасибо

Вопрос задан более трёх лет назад
218 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 2

16 комментариев

jupyter @jupyter Автор вопроса

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

Написано более трёх лет назад
jupyter @jupyter Автор вопроса

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

Написано более трёх лет назад
Дмитрий Карпов @dimonos33ru

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

Написано более трёх лет назад

jupyter @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 @SmthTo Куратор тега CSS

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

Написано более трёх лет назад

Rustam Bainazarov @SmthTo Куратор тега CSS

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 @jupyter Автор вопроса

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

Написано более трёх лет назад
jupyter @jupyter Автор вопроса

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

Написано более трёх лет назад
jupyter @jupyter Автор вопроса

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

Написано более трёх лет назад
jupyter @jupyter Автор вопроса

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

Написано более трёх лет назад
jupyter @jupyter Автор вопроса

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

Написано более трёх лет назад

1 комментарий

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
При загрузке картинки этот блок не имеет размера, как исправить?
- 1 подписчик
- час назад
- 26 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Пустая страница, ошибок нет. JS. В чем проблема?
- 1 подписчик
- 2 часа назад
- 69 просмотров
0

ответов
CSS

Простой
Как убрать отступ?
- 1 подписчик
- 4 часа назад
- 80 просмотров
2

ответа
HTML

+1 ещё

Простой
Как кодировать кириллицу в поле data?
- 1 подписчик
- 7 часов назад
- 39 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в теге select один символ сделать другого цвета?
- 1 подписчик
- 13 часов назад
- 84 просмотра
1

ответ
CSS

Простой
Как уместить кроссбраузерную поддержку в одну строку?
- 1 подписчик
- 13 часов назад
- 100 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- вчера
- 78 просмотров
1

ответ
CSS

+1 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- вчера
- 57 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- вчера
- 81 просмотр
1

ответ
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Frontend React

Glob-com

от 100 000 ₽

Разработка VST-плагина

19 апр. 2024, в 20:43

20000 руб./за проект

Нарисовать баннер для интернет-магазина

19 апр. 2024, в 20:35

500 руб./в час

Разработать несистемный алерт

19 апр. 2024, в 20:11

500 руб./за проект

Answer 1 · 2019-04-22 00:28:28

Дмитрий Карпов @dimonos33ru

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

Ответ написан более трёх лет назад

16 комментариев

Answer 2 · 2019-04-22 00:41:46

Вместо класса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; }

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт