เพิ่มช่องว่าง (“”) หลังจากองค์ประกอบที่ใช้: หลัง

ฉันต้องการเพิ่มพื้นที่ว่างหลังจากเนื้อหาบางส่วน แต่content: " ";ดูเหมือนจะไม่ทำงาน

นี่คือรหัสของฉัน:

h2:after {
    content: " ";
}

... ซึ่งใช้งานไม่ได้อย่างไรก็ตามสิ่งนี้จะ:

h2:after {
    content: "-";
}

ผมทำอะไรผิดหรือเปล่า?

คำอธิบาย

เป็นที่น่าสังเกตว่ารหัสของคุณแทรกช่องว่าง

h2::after {
  content: " ";
}

อย่างไรก็ตามมันจะถูกลบทันที

จากกล่องแบบอินไลน์ไม่ประสงค์ออกนาม ,

เนื้อหาพื้นที่สีขาวที่จะถูกยุบในภายหลังตามคุณสมบัติ 'พื้นที่สีขาว' จะไม่สร้างกล่องอินไลน์ที่ไม่ระบุชื่อ

และจาก'การพื้นที่สีขาว' การประมวลผลรูปแบบ ,

หากช่องว่าง (U + 0020) ที่ท้ายบรรทัดมีการตั้งค่า 'white-space' เป็น 'ปกติ', 'nowrap' หรือ 'pre-line' ก็จะถูกลบออกด้วย

สารละลาย

ดังนั้นหากคุณไม่ต้องการพื้นที่ที่จะถูกลบออกตั้งwhite-spaceไปหรือprepre-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>

อย่าใช้ช่องว่างแบบไม่ทำลาย (U + 00a0) พวกเขาควรจะป้องกันการแบ่งบรรทัดระหว่างคำ พวกเขาไม่ควรถูกใช้เป็นพื้นที่ที่ไม่สามารถพับได้ซึ่งจะไม่มีความหมาย

กลับกลายเป็นว่ามันจะต้องมีการระบุผ่านทางยูนิโคดหนี คำถามนี้เกี่ยวข้องและมีคำตอบ

การแก้ไขปัญหา:

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

ฉันต้องการสิ่งนี้แทนที่จะใช้การแพ็ดดิ้งเพราะฉันใช้คอนเทนเนอร์อินไลน์บล็อกเพื่อแสดงชุดของเหตุการณ์แต่ละเหตุการณ์ในไทม์ไลน์เวิร์กโฟลว์ กิจกรรมสุดท้ายในไทม์ไลน์ไม่จำเป็นต้องมีลูกศรหลังจากนั้น

จบลงด้วยสิ่งที่ชอบ:

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

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

ใช้ fontawesome สำหรับอักขระ gt (chevron) ด้วยเหตุผลใดก็ตาม "เนื้อหา: ไม่มี;" กำลังสร้างปัญหาการจัดตำแหน่งในไทล์สุดท้าย