Как работают псевдоэлементы :after и :before?

Question

[Валерий Петров]

Здравствуйте! Столкнулся с проблемой, псевдоэлементы перестали работать, хотя раньше всё было хорошо.
Привожу код:

<div>

</div>

div {
  width: 100px;
  height: 100px;
  background-color: #000;
}

div::after {
  content: 'Hello!';
  color: #fff;
}

Answer 1

[Сергей Горячев]

Надо давать не код, а ссылку на песочницу.
https://jsfiddle.net/9uz9115g/
Все работает.
PS: Хреновая идея пихать туда тексты.

Comments

[Валерий Петров]

Хмм, почему то я думал что content должен выводиться после div'a, разве не так?

[Алексей Уколов]

Кирилл Кирпиченко: нет, псевдоэлементы выводятся внутри элемента до или после его основного содержимого.

[Сергей Горячев]

Кирилл Кирпиченко: https://jsfiddle.net/9uz9115g/2/

[Сергей]

PS: Хреновая идея пихать туда тексты.

Тексты может и хреновая, но текст "Вперед-Назад" для стрелочек вполне можно. Или символы-иконки из шрифтов

[Сергей Горячев]

Сергей: Не вижу смысла Вперед-Назад пихать, иконки другое дело. Вперед-Назад - это 99% случаев ссылки, какой смысл выносить в псевдоэлементы?

[Сергей Горячев]

Сергей: Если и выносить что-то, то стрелочки, а не текст.

[Дмитрий Лузанов]

Сергей: а как же задел на мультиязычность? Текст лучше оставить для html.