Bài viết này sẽ hướng dẫn bạn cách thay đổi nội dung trong CSS.
Làm thế nào để thay đổi nội dung trong CSS?
Để thay đổi nội dung trong CSS, chúng tôi sẽ sử dụng các phương pháp sau:
Chúng ta hãy xem xét từng phương pháp một!
Phương pháp 1: Sử dụng :: sau Bộ chọn với Thuộc tính nội dung để Thay đổi Nội dung trong CSS
Các ' ::sau 'Selector đặt nội dung được chỉ định sau phần tử HTML sử dụng CSS' Nội dung ' tài sản. Thao tác này giúp thêm nội dung vào phần tử đã chọn. Ngoài ra, “ trưng bày ”Có thể được sử dụng để ẩn nội dung hiện có.
Hãy xem ví dụ dưới đây để hiểu cách thay đổi nội dung trong CSS bằng cách sử dụng :: after selector.
Thí dụ
Đây là trang HTML của chúng tôi với dòng chữ “ Buổi sáng tốt lành!!! ”. Hãy thay thế nội dung đã thêm:
Hiện tại, chúng tôi đã thêm một “ “Tag với văn bản trong phần nội dung của tệp HTML của chúng tôi:
< P > Buổi sáng tốt lành!!! < / P >Trong tệp CSS của chúng tôi, bây giờ chúng tôi sẽ sử dụng bộ chọn :: sau là “ body :: sau ”Và sử dụng“ Nội dung Thuộc tính 'với giá trị' Chào buổi tối ”Bên trong định nghĩa của nó. Kết quả là, bộ chọn CSS sẽ đặt văn bản ngay sau văn bản được viết. Cuối cùng, ẩn văn bản hiện có bằng cách sử dụng “ trưng bày Thuộc tính 'và đặt giá trị của nó thành' không ai ”:
< Phong cách >body :: sau {
Nội dung : 'Chào buổi tối' ;
}
P {
không trưng bày;
}
< / Phong cách >
Bây giờ, hãy lưu tệp HTML của bạn và đơn giản mở tệp đó trên trình duyệt hoặc sử dụng “Máy chủ trực tiếp ”Cho cùng một mục đích:
Như bạn có thể thấy, nội dung đã được thay đổi thành công bằng cách sử dụng bộ chọn :: after CSS:
Phương pháp 2: Sử dụng :: before Bộ chọn với Thuộc tính nội dung để Thay đổi Nội dung trong CSS
Trong CSS, “ ::trước ”Bộ chọn được sử dụng để làm cho nội dung xuất hiện ngay trước nội dung hiện có của một phần tử. Nó có thể được sử dụng kết hợp với “ Nội dung ”Để thêm nội dung mới vào phần tử đã chọn.
Thí dụ
Chỉ định bộ chọn :: before ngay sau phần nội dung là “ body :: trước ”. Điều này sẽ đặt nội dung mới trước nội dung hiện có. Lưu ý rằng tất cả các thuộc tính khác vẫn giống như trong ví dụ trước:
< Phong cách >body :: trước {
Nội dung : 'Chào buổi tối' ;
}
P {
không trưng bày;
}
< / Phong cách >
Đầu ra
Chúng tôi đã giải thích các phương pháp khác nhau để thay đổi nội dung trong CSS.
Sự kết luận
Để thay đổi nội dung, “ ::sau ' và ' ::trước 'Bộ chọn CSS được sử dụng với' Nội dung ' tài sản. Trong cách tiếp cận đầu tiên, văn bản được chỉ định được thêm vào sau phần tử đã chọn, trong khi bộ chọn CSS thứ hai hoạt động ngược lại. Hơn nữa, “ trưng bày Thuộc tính ”có thể được sử dụng để ẩn nội dung hiện có của một phần tử. Đây là cách nội dung được thay đổi hoàn toàn trong CSS. Chúng tôi đã đề cập đến hai phương pháp thay đổi nội dung trong CSS.