Помогите разобраться с :before

[ArFree]

От задачи зависит, before удобнее и проще, но все же больше для статики подходит, к нему js обращается только через костыли по моему

Вообще да, псевдоэлементы лучше использовать по их прямому назначению - создание инлайновых сущностей до и после чего либо.

 

[vava1]

Стоит задача, на изображение товара, в категории, повесить бейдж "скидки". Я его повесил с помощью :before но он отображается только если ссылка на изображение не действительна.
Для просмотра ссылки Войди или Зарегистрируйся

Вы уже убрали "плашку"? Не понимаю в чем сложность, почему нужно исп только для инлайн элементов и при чем здесь js? Если не трудно восстановите проблему, все можно сделать на псевдоклассах.

 

[Smooch]

Вообще да, псевдоэлементы лучше использовать по их прямому назначению - создание инлайновых сущностей до и после чего либо.

Повторюсь, зависит от задачи, я с помощью пседоэлементов простые иконки рисую. Html с ними почище, я предпочитаю их использовать.

Вы уже убрали "плашку"? Не понимаю в чем сложность, почему нужно исп только для инлайн элементов и при чем здесь js? Если не трудно восстановите проблему, все можно сделать на псевдоклассах.

Вы остальные посты читаете, кроме первого? Как вы думаете человек с 15 мая сидит и все не может решить проблему с псевдоэлементами. Тут за день либо все решается либо находиться альтернатива. Мы с Для просмотра ссылки Войди или Зарегистрируйся обсуждаем другой вопрос, который он и задал. А про js я упомянул на случай, что если в бейдже нужна динамика на стороне клиента, то будут сложности... надо пример смотреть, со слов многое не понятно.

 

[kleale]

Блок родитель relative.
К img не подцепить псевдокласы - есть такое исключение у браузеров. Сделайте обертку или прицепляйте :before к ссылке <a> для
a:before{position:absolute;top:10px; left:0;content:'Скидка!'; display:block;padding:2px 10px;background:red; color:#fff;}
a{display:block;position:relative;}

 

[Ta-Snatch]

согласен с klaele
1) убрать у div.spacer position: relative
2) position:relative на <a> и дальше работать с before
как-то так: