Tambahkan spasi ("") setelah elemen menggunakan: setelah

274

Saya ingin menambahkan ruang kosong setelah beberapa konten, namun content: " ";sepertinya tidak berfungsi.

Ini kode saya:

h2:after {
    content: " ";
}

... yang tidak berfungsi, namun ini berhasil:

h2:after {
    content: "-";
}

Apa yang saya lakukan salah?

css bradley.ayers
sumber

Saya tidak mengerti hasil yang diharapkan. Apakah Anda mencoba menambahkan paddingmenggunakan content. Sepertinya tidak mungkin untuk mengetahui apakah ruang itu ditambahkan.

fncomp

Ini adalah pertanyaan aneh, Anda harus menggunakan bantalan untuk menambah ruang, tanpa konten: setelah , mungkin Anda tidak tahu tentang perbedaan antara tampilan: inline dan display: blok?

Littlemad

Saya mencoba menambahkan padding melalui konten.

bradley.ayers

Saya menemukan menambahkan spasi menggunakan metode ini juga berguna ketika overflow: hiddenelemen blok akan memotong beberapa piksel terakhir dari karakter terakhir teks miring. Padding tidak akan membantu dalam kasus ini.

Joe Waller

Padding tidak membantu jika Anda ingin ruang Anda digarisbawahi menggunakan text-decoration: underline;salah satunya.

dmitry_romanov

Jawaban:

142

Penjelasan

Perlu dicatat bahwa kode Anda memasukkan spasi

h2::after {
  content: " ";
}

Namun, itu segera dihapus.

Dari kotak inline Anonim ,

Konten ruang putih yang selanjutnya akan diciutkan sesuai dengan properti 'ruang putih' tidak menghasilkan kotak inline anonim.

Dan dari model pemrosesan 'ruang putih' ,

Jika spasi (U + 0020) di akhir baris memiliki 'ruang putih' diatur ke 'normal', 'nowrap', atau 'pre-line', itu juga dihapus.

Larutan

Jadi, jika Anda tidak ingin ruang dihapus, setel white-spaceke preatau pre-wrap.

h2 {
  text-decoration: underline;
}
h2.space::after {
  content: " ";
  white-space: pre;
}

<h2>I don't have space:</h2>
<h2 class="space">I have space:</h2>

Luaskan cuplikan

Jangan gunakan ruang yang tidak putus (U + 00a0). Mereka seharusnya mencegah jeda di antara kata-kata. Mereka tidak seharusnya digunakan sebagai ruang yang tidak bisa dilipat, itu tidak semantik.

Oriol
sumber

Sepertinya white-spacetidak didukung di iE11 atau Edge (lihat caniuse.com/#search=white-space ). oleh karena itu apakah jawaban oleh pengguna bradley.ayers lebih baik? (Saya tidak tahu, ada aspek lain seperti semantik atau perilaku line-break)

chimos

561

Ternyata itu perlu ditentukan melalui escaped unicode. Pertanyaan ini terkait dan berisi jawabannya.

Solusinya:

h2:after {
    content: "\00a0";
}

bradley.ayers
sumber

Tidak ada artinya bahwa ini akan menambah ruang NON-BREAKING. Jika Anda menginginkan ruang yang normal, Anda perlu "\ 0020" daripada "\ 00A0".

Offlein

Mungkin patut dicatat juga, bahwa menambahkan ruang normal tidak akan melakukan apa-apa. Jika Anda tidak memiliki spasi kosong antara teks dalam hal ini, dan elemen sebelumnya, ini tidak akan menambahkan satu. Ruang normal hanya akan runtuh ke dalam dirinya sendiri.

mheim

@Offlein tolong tambahkan `\ 0020` sebagai jawaban terpisah karena beberapa font, mis. Font Awesome tidak akan memungkinkan \00A0untuk menampilkan spasi, dan jika Anda ingin spasi antar elemen daripada sebelum atau setelah Anda tidak dapat menggunakan bantalan

Mousey

Bagaimana Anda menambahkan ruang setelah sesuatu yang sudah ada dalam konten?

vsync

@ FrançoisDupont, apakah Anda memiliki sumber daya yang menjelaskan perubahan ini?

isherwood

Saya membutuhkan ini daripada menggunakan padding karena saya menggunakan wadah inline-blok untuk menampilkan serangkaian peristiwa individu dalam alur waktu alur kerja. Acara terakhir dalam garis waktu tidak memerlukan panah setelahnya.

Berakhir dengan sesuatu seperti:

.transaction-tile:after {
  content: "\f105";
}

.transaction-tile:last-child:after {
  content: "\00a0";
}

Digunakan fontawesome untuk karakter gt (chevron). Untuk alasan apa pun "konten: tidak ada;" menghasilkan masalah pelurusan pada ubin terakhir.

don.aymar
sumber