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

Question

[Nick Krogan]

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

UPD. решил через абсолют, но все равно не понятно, почему второй код работает, а первый нет, хотя они идентичны

Comments

[Ярослав Иванов]

Display:block; наверное не хватает

[Nick Krogan]

Ярослав Иванов: блок не помог, только инлайн-блок. решил абсолютом

Answer 1

[demidov555]

ошибка в 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;
}

Comments

[Nick Krogan]

пробовал, тогда оно исправляется, но все же, почему второй элемент с релативом работает, а первый нет?

[demidov555]

Nick Krogan: не понял что ты имеешь ввиду, если ты все правильно сделал, будет работать везде

[Nick Krogan]

demidov555: посмотри код и сравни оба элемента, у которых стоит :before

[demidov555]

Nick Krogan: ну ошибка у тебя там, ставь position: absolute; элементам с псевдоклассами.
у .views , .comments position: relative должен быть.

Советую изучить тебе относительное и абсолютное позиционирование. Ты почти каждому элементу position: relative задал!

[Nick Krogan]

demidov555: position: absolute надо всегда псевдоэлементам ставить? и чем плох релатив? если мне надо, чтобы элемент были "виден" потоку

[demidov555]

Nick Krogan: релатив ни чем не плох , его нужно применять тогда когда он действительно нужен, точно так же как и абсолют.

Answer 2

[Никита Геннадич]

Для тех, кто в дальнейшем будет искать ответ на подобный вопрос, дополню.

Псевдоэлементы :before не добавляются к элементам типа input или img, которые не имеют своего содержимого. Решение - обернуть их в div и уже к ним применять эти псевдоэлементы.

Comments

[vik2101]

спасибо, добрый человек)) час сидела искала почему не отображается

Answer 3

[asof]

Добавлю свои 5 копеек)
Пару раз ставил color вместо background, поэтому элемент выводился, но был не виден.

Comments

[PavelWEB]

Именно эти 5 копеек меня выручили)))

Answer 4

[Dmitry Katyushin]

Не хватает символа в content: ""; Просто ради интереса любой добавьте и :before появится

Comments

[Nick Krogan]

никогда в ковычках символов не ставил, и все работало норм, только сейчас такое случилось. заметьте, что второй аналогичный класс работает и без доп символа

[Nick Krogan]

попробовал, ничего не изменилось. в коде заметно, что в класс blog_item-activity .views:before я скопировал свойства из .blog_item-activity .comments:before, второе работает, первое - нет. (да, а обратно поменять забыл))))

[Dmitry Katyushin]

Nick Krogan: да. не обратил внимание, я просто точку поставил и сразу отобразился, забавно что 2ой по коду такой же и работает

Answer 5

[Xozin]

Для того чтобы он работал правильно - нужно задать псевдоэлементу свойство display, например inline-block. То что показывается второй - это магия. Подобную магию вы сможете наблюдать, если в инспекторе хрома поставите первому псевдоэлементу насильно display: block, а потом просто уберете это свойство.