Çoklu içerik: attr() değerler

Question

Öğelerimde 2 şey görüntülemeye çalışıyorum; class adı ve kendi oluşturduğu data-size değişken. Bir beyaz boşluk ile ayrılmış.

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

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

Ama bunu yapmak için doğru bir yol gibi görünmüyor:

Bunu yaparak bu çalışma alabilir. Ben de bunu yapmak için çalıştık:

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

Ama bu hiç bir işe lutfen.

Girdi

HTML

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

CSS

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

Aranıyor çıkış

işlevler ve tırnak arasındaki boşluk olarak aynı olmadığını

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

Not:

eleman 20

Demo here

Answer 1

CSS iki veya daha fazla dize değerleri, separate them with whitespace birleştirmek için içindeki boşluklarda boşlukları. İkincisi, çıktıdaki iki özellik değerini ayıracak bir boşluk karakteri içeren gerçek bir dizedir. Üç bölüm arasındaki boşluk, onları birleştiren operatördür.