Khi bạn sử dụng pseudo-elements before và after, bạn nhất định phải có CSS property “content”, như hình với bóng vậy. Nếu được tận dụng tốt, CSS property này có thể giúp bạn trong những trường hợp sau đây
Mục lục
Làm danh sách có số thứ tự
Nếu bạn không thể dùng <ol> để lập danh sách có số thứ tự được, cách này sẽ giúp được bạn
See the Pen content counter by minhchau (@ngocminhxx) on CodePen.
Thêm bất kì HTML attribute nào vào content
See the Pen attribute content by minhchau (@ngocminhxx) on CodePen.
Đóng mở ngoặc kép trong đoạn văn
Có một lưu ý nhỏ, các bạn không thể đóng ngoặc kép (close-quote) nếu chưa có mở ngoặc kép (open-quote) trước nhé. Có mở thì mới có đóng. Quá hơp lí chứ nhỉ ^^
See the Pen quote content by minhchau (@ngocminhxx) on CodePen.
Tooltip đơn giản với CSS
Nếu bạn cần một cái tooltip đơn giản, vài dòng CSS với ứng dụng before hoặc after, bạn sẽ có được một tooltip dễ làm dễ dùng như dưới đây
See the Pen CSS tooltip content by minhchau (@ngocminhxx) on CodePen.
Browser support
CSS property content được hỗ trợ hầu hết bởi các trình duyệt phổ biến hiện nay
Data on support for the mdn-css__properties__content feature across the major browsers