От автора: есть свойство CSS content, которое используется в тандеме с элементами ::before и ::after. Оно вводит контент в элемент.
Вот пример:
<div data-done="✅" class="email"> [email protected] </div>
.email::before { content: attr(data-done) " Email: "; /* Это вставляется перед адресом email */
}Свойство обычно принимает все, что вы туда вносите. Однако есть некоторые недопустимые значения, которые оно не примет. Я слышал это недавно от кого-то, кого это смутило, поэтому я немного поэкспериментировал и узнал кое-что. Это работает прекрасно:
/* Валидный */
::after { content: "1";
}…а это нет:
/* Невалидный, не строка */
::after { content: 1;
}Я не совсем понимаю, почему, но я предполагаю, что это потому, что 1 — это число без единиц измерения (т. е. 1, а не 1px), а не строка. Вы тоже не сможете это обойти! Я уже пробовал:
/* Невалидный, трюк не проходит */
::after { content: "" 1;
}Вы можете выводить числа из атрибутов, хотя, как вы могли подозревать:
<div data-price="4">Coffee</div>
/* Это "работает" */
div::after { content: " $" attr(data-price);
}Но, конечно, вы никогда не будете использовать сгенерированный контент для важной информации, такой как цена, правильно ?! (Пожалуйста, не делайте этого. Это не очень доступно, и текст не может быть выделен.)
Даже если вы можете получить и отобразить это число, это просто строка. Вы не можете ничего с ней сделать.
<div data-price="4" data-sale-modifier="0.9">Coffee</div>
/* Ничего не случится */
div::after { content: " $" calc(attr(data-price) * attr(data-sale-modifier));
}Вы не можете использовать числа, период:
/* Нет */
::after { content: calc(2 + 2);
}Осторожно! Не пытайтесь объединить строки, как вы могли бы сделать в PHP или JavaScript:
/* Это не работает */
::after { content: "1" . "2" . "3"; content: "1" + "2" + "3"; /* Используйте пробелы */ content: "1" "2" "3"; /* Или ничего */ content: "1 2 3"; /* Используйте кавычки (одиночные или двойные, не имеет значения), но контент, который не возвращается из атрибутов, не нужно заключать в кавычки. */
}В спецификации есть вещь, которая позволяет преобразовывать атрибуты в фактический тип, а не обрабатывать их как строки…
<wood length="12" />
wood { width: attr(length em); /* or other values like "number", "px", or "url" */
}… но я уверен, что пока ничего не работает. Кроме того, это все равно не помогает нам с псевдо-элементами, поскольку строки уже работают, а числа — нет.
Человек, который обратился ко мне по электронной почте, был определенно смущен, почему они не смогли использовать calc() для content. Я не уверен, что смогу помочь вам выполнить вычисления в этой ситуации, но стоит помнить, что псевдо-элементы могут быть счетчиками, и эти счетчики могут выполнять ограниченные вычисления. Например, вот счетчик, который начинается с 12 и увеличивается на -2 для каждого элемента на этом уровне в DOM.
Единственное, что мы не упомянули здесь, это то, что псевдо-элемент может быть изображением. Например:
p:before { content: url(image.jpg);
}… но это странно ограничено. Вы даже не можете изменять размер изображения. Гораздо более распространенным является использование для значения пустой строки (content: «»;), с помощью которой можно очищать смещение, а также для нее можно указать позицию, размер и собственный фон.
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.