#простые_хитрости
Поговорим про псевдоэлементы. Если вам сейчас вспомнились ::after и ::before, то вы на верном пути :)) Хотя сам список намного больше - вот еще парочка частых примеров ::placeholder (для полей) ::marker (для списков).
Но поговорим про первые два. По сути они добавляются к элементу в начале и в конце, создавая дополнительное содержимое. Или даже замещая текущее (пример с логотипом).
Сейчас у меня не стоит задачи рассказать вам как можно вообще использовать псевдоэлементы в работе на ГК. Хочу показать несколько вещей, которые вам точно пригодятся:
пробелы
чтобы создать пробел между шрифтовой иконкой и текстом необходимо написать \00a0
content: "\f2b9 \00a0 Текстовка";
шрифтовую иконку и текст со специфическим шрифтом можно ставить в один псевдоэлемент, используя "пересечение" шрифтов в описании стиля
font-family: "FontAwesome", "Comfortaa", cursive;
помимо "пробела" можно брать еще \A, который в сочетании с white-space: pre; даст перенос текста и даже имитацию маркированного списка
прекрасно работают спецсимволы HTML (см пример)
.f-text p:after {
white-space: pre;content: '\273f Какой сегодня чудесный день! \A А завтра будет еще лучше! \2764\2764\2764 \A\00BF Понять и простить ГК \00BF \A \f2b9 Кто здесь \21BA';
font-family: "FontAwesome", "Comfortaa", cursive;
display: block;
}
К чему это я? К созданию дополнительного текстового содержимого на сайте. Но не стоит увлекаться, ведь создание через js даст намного больше возможностей работы с этим текстовым элементом в дальнейшем. Особенно, если вам еще нужно работать с цветовой разметкой внутри таких компонентов
и да!
иcпользование data для поддержки контента
.test_text:after {
content: attr(data-text);
}
зы в оформлении на ГК очень часто используют псевдоэлементы, когда речь идет о модификации контента. Последний пример - просто мастхев, когда делают динамические прогресс-бары
