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