Menggunakan CSS untuk menyisipkan teks

207

Saya relatif baru menggunakan CSS, dan telah menggunakannya untuk mengubah gaya dan format teks.

Sekarang saya ingin menggunakannya untuk menyisipkan teks seperti yang ditunjukkan di bawah ini:

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

Yang saya harap bisa saya tampilkan sebagai:

Tugas Joe: merekonsiliasi semua entri

Artinya, hanya berdasarkan kelas "Pemilik Joe", saya ingin teks yang Joe's Task:akan ditampilkan.

Saya bisa melakukannya dengan kode seperti:

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

Tapi itu tampaknya sangat berlebihan untuk menentukan kelas dan teks.

Apakah mungkin melakukan apa yang saya cari?

EDIT Satu ide adalah mencoba mengaturnya sebagai ListItem di <li>mana "peluru" adalah teks "Tugas Joe". Saya melihat contoh cara mengatur berbagai gaya peluru dan bahkan gambar untuk peluru. Apakah mungkin menggunakan blok teks kecil untuk daftar-peluru?

html css kasar
sumber
1
ide <li> bukan praktik yang baik. Jika Anda benar-benar ingin ini, lihatlah ke bahasa templating.
Gary
1
Kedengarannya seperti menggunakan CSS3: sebelum atau: setelah elemen semu Anda benar-benar hanya akan memindahkan redundansi ke tanah CSS (karena Anda harus menambahkan pernyataan CSS untuk OwnerJoe, OwnerJane, dll.)
Matt Beckman
2
@ Matt Beckman: Tidak masalah dengan saya. Saya dapat dengan mudah mendefinisikan blok CSS untuk setiap pengguna saya. Mengulanginya berulang-ulang dalam HTML tampaknya berlebihan dalam kasus saya.
abelenky
1
Saya merasa seperti penggunaan yang lebih praktis ini untuk khalayak yang lebih luas akan seperti label.required:before {content: "* ";}menambahkan tanda bintang di depan bidang yang diperlukan, mungkin.
Patrick

Jawaban:

317

Memang, tetapi membutuhkan browser yang mampu CSS2 (semua browser utama, IE8 +).

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

Tapi saya lebih suka merekomendasikan menggunakan Javascript untuk ini. Dengan jQuery:

$('.OwnerJoe').each(function() {
  $(this).before($('<span>').text("Joe's Task: "));
});
Marcel Jackwerth
sumber
4
Seharusnya ada spasi setelah usus besar.
system PAUSE
7
Tes awal menunjukkan properti konten berfungsi dengan baik. Selamat untuk menemukan jawaban ketika semua orang mengatakan itu tidak dapat dilakukan. :)
abelenky
8
Untuk mencakup IE yang lebih lama, Anda dapat memasukkan code.google.com/p/ie7-js secara kondisional yang memungkinkan CSS Anda tetap sama untuk semua browser. Ini alternatif untuk jQuery yang lebih dekat dengan standar.
system PAUSE
15
Mengapa Anda lebih suka menggunakan Javascript?
Rikki
Menarik: tampaknya bekerja dengan satu atau dua titik dua, misalnya .OwnerJoe:beforedan.OwnerJoe::before
Tuan Kennedy
40

Jawaban menggunakan jQuery yang tampaknya disukai setiap orang memiliki kelemahan utama, yaitu tidak dapat diskalakan (setidaknya seperti yang tertulis). Saya pikir Martin Hansen memiliki ide yang tepat, yaitu menggunakan data-*atribut HTML5 . Dan Anda bahkan dapat menggunakan tanda kutip dengan benar:

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 - " ; }

keluaran:

Joe's task - mop kitchen
Charles' task - vacuum hallway
Jeff
sumber
19
Efek samping yang menarik untuk menggunakan konten css sebagai kebalikan dari jQuery adalah bahwa teks yang disediakan oleh atribut konten tidak dapat dipilih, yang mungkin atau mungkin tidak diinginkan ....
Jeff
Jika teks adalah bagian dari tata letak halaman dan bukan bagian dari konten, mungkin CSS adalah tempat yang tepat untuk itu. Misalnya, jika Anda ingin halaman Anda mengarah ke semua halaman menjadi kata-kata "Hello World" dengan warna ungu pada latar belakang hijau limau, itu masuk akal. Yang diperlukan untuk mengubah judul halaman Anda adalah mengedit satu file CSS. Jika Anda memiliki teks dalam HTML, itu akan menyunting setiap halaman di situs Anda dan mungkin juga mengubah aplikasi web Anda.
kasus
28

Periksa juga fungsi attr () dari atribut konten CSS. Ini menampilkan atribut elemen sebagai node teks. Gunakan seperti ini:

<div class="Owner Joe" />

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

Atau bahkan dengan atribut data khusus HTML5:

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

div:before {
  content: attr(data-employeename);
}
Martin Hansen
sumber
2
Itu ide yang jauh lebih baik - saya benci ide membuat kelas css untuk menampilkan konten. Itu bisa berakhir menghasilkan css secara dinamis berdasarkan kueri sql. Saya akan mengganti pemilih dengan div[data-employeename]:before.
Johnny5
6

Cukup kode seperti ini:

.OwnerJoe {
  //other things here
  &:before{
    content: "Joe's Task: ";
  }
}
BartSabayton
sumber
18
Ini bukan CSS yang valid, tetapi sintaksis Sass.
Asfand Qazi