Задать вопрос
@nollac

Не отображается :before, в чем ошибка?

Суть вопроса озвучена в названии поста. сначала сверстал и было все норм, но в один момент перестал отображаться :before. кеш чистил, не помогло. где я допустил ошибку? требуемые элемент в css обозначен зеленым цветом, класс .blog_item-activity .views:before. при проверке инструментами разработчика показывает, что нет высоты и ширины, хотя она задана. копировал аналогичный код с класса .blog_item-activity .comments:before, не помогло. в чем может быть ошибка?
Код.

UPD. решил через абсолют, но все равно не понятно, почему второй код работает, а первый нет, хотя они идентичны
  • Вопрос задан
  • 19182 просмотра
Подписаться 1 Оценить 2 комментария
Решения вопроса 1
demidov555
@demidov555
front-end
ошибка в position: relative; а должен быть absolute;
а в родительском блоке(то есть тег которому ты задаешь бефор) должно быть position: relative;

.views{
position: relative;
color: #999;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
font-style: italic;
line-height: 24px;
padding-left: 20px;
}

.views:before {
content: "";
position: absolute;
width: 20px;
height: 11px;
top:0;
left:0;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
Psychosynthesis
@Psychosynthesis
Fullstack developer and radio engineer
Для тех, кто в дальнейшем будет искать ответ на подобный вопрос, дополню.

Псевдоэлементы :before не добавляются к элементам типа input или img, которые не имеют своего содержимого. Решение - обернуть их в div и уже к ним применять эти псевдоэлементы.
Ответ написан
asof
@asof
Добавлю свои 5 копеек)
Пару раз ставил color вместо background, поэтому элемент выводился, но был не виден.
Ответ написан
Не хватает символа в content: ""; Просто ради интереса любой добавьте и :before появится
Ответ написан
@Xozin
Для того чтобы он работал правильно - нужно задать псевдоэлементу свойство display, например inline-block. То что показывается второй - это магия. Подобную магию вы сможете наблюдать, если в инспекторе хрома поставите первому псевдоэлементу насильно display: block, а потом просто уберете это свойство.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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