Trong CSS có hai thuộc tính dùng để bổ sung thành phần vào đằng trước và đằng sau thẻ HTML đó là thuộc tính after và before, hai thuộc tính này được dùng rất nhiều khi xây dựng layout website. Không những vậy mà các Framework CSS hay FontAwesome cũng sử dụng hai thuộc tính này để tạo icon.
1. After và Before trong CSS
Bạn có thể bổ sung bất cứ gì đằng trước và đằng sau thẻ HTML bằng cách sử dụng after và before. Cú pháp của nó như sau:
selector:after{
}
selector:before{
}Bây giờ chúng ta cùng tìm hiểu chi tiết hơn nhé.
After trong CSS
After dùng để thêm nội dung vào đằng sau thẻ HTML.
Bài viết này được đăng tại [kiso.vn]
Ví dụ: XEM DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.title:after{
content : " kiso.vn"
}
</style>
</head>
<body>
<div class="title">Chào mừng bạn đến với</div>
</body>
</html>Rõ ràng trong HTML mình chỉ có dòng “Chào mừng bạn đến với” vậy mà khi chạy lên lại xuất hiện dòng “Chào mừng bạn đến với kiso.vn“. Lý do là trong thuộc tính after mình có bổ sung một thuộc tính CSS content:" kiso.vn" nên nó nối vào đằng sau.
Before trong CSS
Before dùng để thêm nội dung vào đằng trước thẻ HTML.
Ví dụ: XEM DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.title:before{
content : "kiso.vn "
}
</style>
</head>
<body>
<div class="title">Chào mừng bạn</div>
</body>
</html>Kết quả nó bổ sung chữ “freetust.net” vào đằng trước nội dung của thẻ HTML nên xuất hiện lên màn hình dòng “kiso.vn chào mừng bạn“.
2. Một số lưu ý khi sử dụng after và before trong CSS
Lưu ý 1: Nội dung mà bạn thêm vào bằng thuộc tính after hoặc before sẽ không thể dùng chuột bôi đen và copy được, không tin bạn hãy copy những dòng chữ ở hai ví dụ trong phần 1.
Lưu ý 2: Ta có thể coi After và Before giống như hai thẻ HTML bình thường nên bạn có thể sử dụng hầu hết các thuộc tính CSS trên chúng.
Ví dụ: XEM DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.title:before{
content : "After và Before ";
cursor: text;
border: solid 1px;
padding: 5px;
background: red
}
</style>
</head>
<body>
<div class="title">có thể sử dụng CSS</div>
</body>
</html>Nếu bạn để ý kỹ thì theo mặc định after và before sẽ có mặc định là display:inline-block.
3. Lời kết
Ngoài các ví dụ trên thì after và before thường được sử dụng nhất ở các CSS Font Library như FontAwesom, thư viện này mình sẽ giới thiệu nó cho các bạn ở một bài gần nhất. Chúc các bạn học tốt.
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. After và Before trong CSSAfter trong CSSBefore trong CSS2....
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. After và Before trong CSSAfter trong CSSBefore trong CSS2. Một số lưu ý khi sử dụng after và before trong CSS3. Lời kết1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. After và Before trong CSSAfter trong CSSBefore trong CSS2. Một số lưu ý khi sử dụng after và before trong CSS3. Lời kếtV. Phân tích và khai thác các lỗ hổng Directory traversal...
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. After và Before trong CSSAfter trong CSSBefore trong CSS2. Một số lưu ý khi sử dụng after và before trong CSS3. Lời kếtV. Phân tích và khai thác các lỗ hổng Directory traversal...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. After và Before trong CSSAfter trong CSSBefore trong CSS2. Một số lưu ý khi sử dụng after và before trong CSS3. Lời kếtIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi...