Множественное содержимое: значения attr ()

#html #css #pseudo-element #css-content

#HTML #css #псевдоэлемент #css-контент

Вопрос:

Я пытаюсь отобразить в своих элементах 2 вещи; class имя и собственную созданную data-size переменную. Разделены одним пробелом.

Я мог бы заставить это работать, выполнив это:

 .element:before {
   content: attr(class);
}

.element:after {
   content: attr(data-size);
}

Но это не похоже на правильный способ сделать это. Я также пытался это сделать:

 .element:before {
   content: attr(class data-size);
}

Но это не сработало.

Ввод

HTML

 <div class="element" data-size="20"></div>

CSS

 .element:before {
    content: attr(class data-size);
}

Требуемый результат

элемент 20

Демонстрация здесь

Ответ №1:

Чтобы объединить два или более строковых значения в CSS, разделите их пробелом:

 .element:before {
    content: attr(class) ' ' attr(data-size);
}

Обратите внимание, что пробелы между attr() функциями и кавычками не совпадают с пробелами внутри кавычек. Последнее представляет собой фактическую строку, содержащую пробел, который будет разделять два значения атрибута в выходных данных. Пробел между тремя частями — это оператор, который соединяет их вместе.

1. Спасибо, принимаю ваш ответ, когда смогу. Могу ли я делать это столько раз, сколько захочу, и могу ли я добавить сюда и другие вещи?

2. @Bas: Да, вы можете сделать это с таким количеством строк, сколько захотите. Вы также можете поместить любую другую строку, которую хотите, если вы заключили ее в кавычки, например content: attr(data-foo) ' abc';

3. ну ладно, не знал. Можно ли также вставить новую строку?

4. @Bas: Да, для вставки новой строки используйте 'A' . Вам нужно будет добавить white-space: pre или pre-wrap к вашему правилу, чтобы заставить его фактически отображать разрыв строки. Вот демонстрация: jsfiddle.net/BoltClock/vD4E3/9

5. По какой-то причине это не сработало: content: attr(class) 'A' attr(data-size);