: After öğesini kullanarak bir öğenin arkasına boşluk (“”) ekleyin

274

Bazı içeriklerden sonra bir boşluk eklemek istiyorum, ancak content: " ";çalışmıyor gibi görünüyor.

Bu benim kodum:

h2:after {
    content: " ";
}

... ki bu işe yaramıyor, ancak bu:

h2:after {
    content: "-";
}

Neyi yanlış yapıyorum?

css

— bradley.ayers
kaynak

Beklenen sonucu anlamıyorum. paddingKullanarak eklemeye mi çalışıyorsunuz content? Alanın eklenip eklenmediğini söylemek imkansız gibi görünüyor.

— fncomp

Bu garip bir soru, boşluk eklemek için dolgu kullanmalısınız , içerik yok : sonra , belki de display: inline ve display: block arasındaki farkı bilmiyorsunuz?

— Littlemad

İçerik üzerinden dolgu eklemeye çalışıyorum.

— bradley.ayers

overflow: hiddenBir blok öğesinin italik metnin son karakterinin son birkaç pikselini keseceği zaman bu yöntemi kullanarak bir boşluk eklemenin de yararlı olduğunu buldum . Dolgu bu durumda yardımcı olmaz.

— Joe Waller

Dolgu, alanınızın text-decoration: underline;her ikisini de kullanarak altı çizili olmasını istiyorsanız yardımcı olmaz .

— dmitry_romanov

Yanıtlar:

142

açıklama

Kodunuzun bir boşluk eklediğini belirtmek gerekir.

h2::after {
  content: " ";
}

Ancak, hemen kaldırılır.

Gönderen Anonim satır içi kutuları ,

Daha sonra 'beyaz boşluk' özelliğine göre daraltılacak beyaz boşluk içeriği, anonim satır içi kutular oluşturmaz.

Ve 'beyaz boşluk' işleme modelinden ,

Bir çizginin sonundaki boşluk (U + 0020) 'beyaz boşluk' 'normal', 'nowrap' veya 'ön çizgi' olarak ayarlanmışsa, o da kaldırılır.

Çözüm

Yani uzay ayarlayın kaldırılacak istemiyorsanız white-spaceetmek preveya 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>

Snippet'i genişlet

Kırılmayan boşluklar kullanmayın (U + 00a0). Kelimeler arasında satır sonlarını önlemeleri gerekiyor. Bunların, semantik olmayacak, daraltılamaz alan olarak kullanılmaları beklenmemektedir.

— Oriol
kaynak

Görünüşe göre white-spaceiE11 veya Edge'de desteklenmiyor (bkz. Caniuse.com/#search=white-space ). bu nedenle kullanıcı bradley.ayers cevap daha iyi? (Bilmiyorum, anlambilim veya satır sonu davranışı gibi başka yönler de vardır)

— chimos

561

Kaçan unicode ile belirtilmesi gerektiği ortaya çıkıyor. Bu soru ilişkilidir ve yanıtı içerir.

Çözüm:

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

— bradley.ayers
kaynak

Bu, KESİN OLMAYAN bir alan katacak hiçbir şeye değmez. Normal bir alan istiyorsanız, "\ 00A0" yerine "\ 0020" gerekir.

— 2014'te

Normal bir alan eklemenin hiçbir şey yapmayacağını da belirtmek gerekir. Buradaki metin ile önceki öğe arasında boşluk yoksa, bu bir tane eklemez. Normal bir alan kendi içine çöker.

— mheim

@Offlein lütfen ayrı bir cevap olarak `\ 0020` ekleyin çünkü bazı yazı tipleri, örneğin Font Awesome \00A0bir boşluk görüntülenmesine izin vermez ve öğelerden önce veya sonra değil, öğeler arasında boşluk istiyorsanız, dolgu kullanamazsınız

— Mousey

Zaten içerikte olan bir şeyden sonra nasıl alan eklersiniz?

— vsync

@ FrançoisDupont, bu değişikliği açıklayan bir kaynağınız var mı?

— isherwood

Dolgu kullanmak yerine buna ihtiyacım vardı çünkü bir iş akışı zaman çizelgesinde bir dizi olayı görüntülemek için satır içi kapsayıcılar kullandım. Zaman çizelgesindeki son olayın peşinden bir ok gerekmiyordu.

Sonunda şuna benzer:

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

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

Gt (chevron) karakteri için fontawesome kullanıldı. Herhangi bir nedenle "içerik: yok;" son döşemede hizalama sorunları üretiyordu.

— don.aymar
kaynak