04/10/2018, 17:08
[Bài 13]After và Before trong CSS
After và Before trong CSS. After và Before trong CSS được dùng để thêm nội dung vào trước hoặc sau thẻ HTML. Ví dụ : After dùng để thêm nội dung vào sau thẻ HTML XHTML <!DOCTYPE html> <html> <head> <me ...
After và Before trong CSS.
After và Before trong CSS được dùng để thêm nội dung vào trước hoặc sau thẻ HTML.
Ví dụ :
After dùng để thêm nội dung vào sau thẻ HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<style type="text/css">
.after:after{
content: 'Laptrinhphp.com.vn';
}
</style>
<body>
<div class="after" style="font-size:30px">
Chào mừng bạn đến với
</div>
</body>
</html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <style type="text/css"> .after:after{ content: 'Laptrinhphp.com.vn'; } </style> <body> <div class="after" style="font-size:30px"> Chào mừng bạn đến với </div> </body> </html> |
Kết quả :
Before dùng để thêm nội dung vào trước thẻ HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<style type="text/css">
.before:before{
content: 'Devpro.edu.vn';
}
</style>
<body>
<div class="before" style="font-size:30px">
chào mừng bạn
</div>
</body>
</html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <style type="text/css"> .before:before{ content: 'Devpro.edu.vn'; } </style> <body> <div class="before" style="font-size:30px"> chào mừng bạn </div> </body> </html> |
Kết quả :
Có thể coi After và Before giống như 2 thẻ HTML nên ta có thể sử dụng CSS cho chúng
Ví dụ :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<style type="text/css">
.before:before{
content: 'Devpro.edu.vn';
color: red;
font-style: italic;
}
</style>
<body>
<div class="before" style="font-size:30px">
chào mừng bạn
</div>
</body>
</html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <style type="text/css"> .before:before{ content: 'Devpro.edu.vn'; color: red; font-style: italic; } </style> <body> <div class="before" style="font-size:30px"> chào mừng bạn </div> </body> </html> |
Kết quả :
Lưu ý : Phần nội dung thêm bằng After hay Before không thể bôi đen, coppy được.
Nếu chưa hiểu rõ, các bạn có thể tham khảo các khóa học tại đây.
Chúc các bạn thành công !!!
