Thêm một khoảng trắng (xóa Trực tiếp) sau một phần tử bằng cách sử dụng: after

Tôi muốn thêm một khoảng trống sau một số nội dung, tuy nhiên content: " ";dường như không hoạt động.

Đây là mã của tôi:

h2:after {
    content: " ";
}

... không hoạt động, tuy nhiên điều này không:

h2:after {
    content: "-";
}

Tôi đang làm gì sai?

Giải trình

Điều đáng chú ý là mã của bạn không chèn một khoảng trắng

h2::after {
  content: " ";
}

Tuy nhiên, nó ngay lập tức bị loại bỏ.

Từ hộp nội tuyến ẩn danh ,

Nội dung khoảng trắng sau đó sẽ bị thu gọn theo thuộc tính 'khoảng trắng' không tạo ra bất kỳ hộp nội tuyến ẩn danh nào.

Và từ mô hình xử lý 'khoảng trắng' ,

Nếu một khoảng trắng (U + 0020) ở cuối dòng có 'khoảng trắng' được đặt thành 'bình thường', 'nowrap' hoặc 'trước dòng', nó cũng bị xóa.

Giải pháp

Vì vậy, nếu bạn không muốn xóa khoảng trống, hãy đặt white-spacethành prehoặc 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>

Không sử dụng khoảng trắng không phá vỡ (U + 00a0). Chúng được cho là để ngăn chặn ngắt dòng giữa các từ. Chúng không được sử dụng như là không gian không thể thu gọn, đó sẽ không phải là ngữ nghĩa.

Hóa ra nó cần phải được chỉ định thông qua unicode thoát. Câu hỏi này có liên quan và chứa câu trả lời.

Giải pháp:

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

Tôi cần điều này thay vì sử dụng phần đệm bởi vì tôi đã sử dụng các thùng chứa khối nội tuyến để hiển thị một loạt các sự kiện riêng lẻ trong dòng thời gian của công việc. Sự kiện cuối cùng trong dòng thời gian không cần mũi tên sau nó.

Kết thúc với một cái gì đó như:

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

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

Đã sử dụng fontawgie cho ký tự gt (chevron). Vì lý do gì "nội dung: không có;" đã tạo ra các vấn đề liên kết trên gạch cuối cùng.