Metin eklemek için CSS kullanma

207

CSS için nispeten yeniyim ve bunu metnin stilini ve biçimlendirmesini değiştirmek için kullandım.

Şimdi aşağıda gösterildiği gibi metin eklemek için kullanmak istiyorum:

<span class="OwnerJoe">reconcile all entries</span>

Umarım şöyle gösterebilirim:

Joe'nun Görevi: tüm girişleri uzlaştır

Yani, "Owner Joe" sınıfı olması nedeniyle, metnin Joe's Task:görüntülenmesini istiyorum .

Ben gibi kod ile yapabilirdi:

<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.

Ancak bu, hem sınıfı hem de metni belirtmek için çok gereksiz görünüyor.

Aradığım şeyi yapmak mümkün mü?

DÜZENLEME Bir fikir, <li>"madde işareti" metnin "Joe's Task" olduğu bir ListItem olarak ayarlamaya çalışmaktır . Mermi için çeşitli mermi stillerinin ve hatta görüntülerin nasıl ayarlanacağına dair örnekler görüyorum. Liste madde işareti için küçük bir metin bloğu kullanmak mümkün müdür?

html css

— abelenky
kaynak

1

<li> fikir iyi bir uygulama değildir. Bunu gerçekten yapmak istiyorsanız, bunun yerine geçici bir dile bakın.

— Gary

1

CSS3'ü kullanmak gibi geliyor: önce veya: sözde elemanlardan sonra artıklık artık CSS arazisine taşınacak (çünkü OwnerJoe, OwnerJane, vb. İçin bir CSS ifadesi eklemeniz gerekecek)

— Matt Beckman

2

@Matt Beckman: Benim için sorun değil. Kullanıcılarımın her biri için kolayca CSS bloklarını tanımlayabilirim. Benim durumumda HTML'yi tekrar tekrar tekrarlamak aşırı görünüyor.

— abelenky

1

Daha geniş kitleler için bunun daha pratik bir kullanımı label.required:before {content: "* ";}, belki de zorunlu alanların önüne bir yıldız işareti eklemek istiyorum gibi hissediyorum .

— Patrick

317

CSS2 özellikli bir tarayıcı gerektirir (tüm büyük tarayıcılar, IE8 +).

.OwnerJoe:before {
  content: "Joe's Task:";
}

Ama bunun için Javascript kullanmanızı tavsiye ederim. JQuery ile:

$('.OwnerJoe').each(function() {
  $(this).before($('<span>').text("Joe's Task: "));
});

— Marcel Jackwerth
kaynak

4

İki nokta üst üste işaretinden sonra boşluk olmalıdır.

— sistem DURAKLAT

7

İlk testler, içerik özelliğinin iyi çalıştığını gösterir. Herkes yapamayacağını söylediğinde bir cevap bulduğunuz için tebrikler. :)

— abelenky

8

Eski IE'yi kapsamak için şartlı olarak , CSS'nizin tüm tarayıcılar için aynı kalmasına izin verecek olan code.google.com/p/ie7-js ekleyebilirsiniz . Standartlara daha yakın olan jQuery'ye bir alternatiftir.

— sistem DURAKLAT

15

Neden Javascript kullanmanızı tavsiye edersiniz?

— Rikki

İlginç: Bir veya iki kolon ile çalışıyor gibi görünüyor, .OwnerJoe:beforeve.OwnerJoe::before

— Bay Kennedy

40

Herkesin hoşuna giden jQuery kullanarak cevap büyük bir kusura sahiptir, ki bu ölçeklenebilir değildir (en azından yazıldığı gibi). Bence Martin Hansen, HTML5 data-*özelliklerini kullanmak için doğru fikre sahip . Ayrıca kesme işaretini doğru bir şekilde kullanabilirsiniz:

html:

<div class="task" data-task-owner="Joe">mop kitchen</div>
<div class="task" data-task-owner="Charles" data-apos="1">vacuum hallway</div>

css:

div.task:before { content: attr(data-task-owner)"'s task - " ; }
div.task[data-apos]:before { content: attr(data-task-owner)"' task - " ; }

çıktı:

Joe's task - mop kitchen
Charles' task - vacuum hallway

— Jeff
kaynak

19

JQuery yerine css içeriğini kullanmanın ilginç bir yan etkisi, content özniteliği tarafından sağlanan metnin seçilemeyebilir veya istenmeyebileceğidir ....

— Jeff

Metin, sayfa düzeninin bir parçasıysa ve içeriğin bir parçası değilse, belki CSS bunun için doğru yerdir. Örneğin, tüm sayfalardaki sayfanızın kireç yeşili zemin üzerine mor renkte "Merhaba Dünya" kelimeleri olmasını istiyorsanız, bu mantıklı olacaktır. Sayfa başlığınızı değiştirmek için tek yapmanız gereken tek bir CSS dosyasını düzenlemek. HTML'de metin varsa, sitenizdeki her sayfada bir düzenleme yapar ve belki de web uygulamalarınızda değişiklik yapar.

— casgage

28

Ayrıca CSS içerik özelliğinin attr () işlevine de bakın. Öğenin belirli bir niteliğini bir metin düğümü olarak verir. Şöyle kullanın:

<div class="Owner Joe" />

div:before {
  content: attr(class);
}

Veya yeni HTML5 özel veri özelliklerinde bile:

<div data-employeename="Owner Joe" />

div:before {
  content: attr(data-employeename);
}

— Martin Hansen
kaynak

2

Bu daha iyi bir fikir - İçeriği görüntülemek için bir css sınıfı oluşturma fikrinden nefret ediyorum. Sonunda bir sql sorgusu dinamik olarak css oluşturmak sonuçlanabilir. Seçiciyi ile değiştiririm div[data-employeename]:before.

— Johnny5

6

Sadece şöyle kodlayın:

.OwnerJoe {
  //other things here
  &:before{
    content: "Joe's Task: ";
  }
}

— BartSabayton
kaynak

18

Bu geçerli bir CSS değil, Sass sözdizimi.

— Asfand Qazi