Bài 14: After và Before trong CSS

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 ...

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.

Ví dụ

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .title:after{
                content : " code24h.com"
            }
        </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 code24h.com". Lý do là trong thuộc tính after mình có bổ sung một thuộc tính CSS content:" code24h.com" 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ụ

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .title:before{
                content : "code24h.com "
            }
        </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 "code24h.com 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ụ:

<!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 KẾ SAU
BÀI KẾ TIẾP
 

Nguồn: code24h.com

Bài liên quan

[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 ...

Trần Trung Dũng viết 17:08 ngày 04/10/2018

[BÀI 14]Kỹ thuật Clearfix trong CSS

Kỹ thuật Clearfix trong CSS Clearfix trong CSS không phải là một thuộc tính, mà nó là một kỹ thuật để loại bỏ ảnh hưởng của float lên các vùng. Clearfix là gì? Khi một thẻ cha có thẻ con sử dụng float thì chiều cao của thẻ cha so với thẻ con đó là 0px. Chiều cao của thẻ cha chỉ phụ ...

Trần Trung Dũng viết 17:07 ngày 04/10/2018

[BÀI 4]Class và ID trong CSS

Class và ID trong CSS Class : class hay còn gọi là lớp dùng để chỉ một lớp các đối tượng có chung các thuộc tính. Các đối tượng trong cùng một class có tính thừa kế lẫn nhau, chính vì vậy trong một trang HTML của bạn có thể có rất nhiều các đối tượng có thể thuộc một class nào đó. Ví dụ : ...

Trần Trung Dũng viết 17:07 ngày 04/10/2018

[BÀI 8]Thuộc tính padding và margin trong css

Thuộc tính padding và margin trong CSS Padding và margin là 2 thuộc tính trong css giúp căn chỉnh các thành phần của website vào vị trí mà mình mong muốn. 1. Margin Dùng để tạo khoảng cách với các thành phần bên ngoài thẻ HTML. Các giá trị có thể là px, em, %….. Margin-top : ...

Trịnh Tiến Mạnh viết 17:06 ngày 04/10/2018

[BÀI 9]Position Relative và Absolute trong CSS

Position Relative và Absolute trong CSS Position là thuộc tính giúp bạn tùy chỉnh khu vực hiển thị cho phần tử và việc tùy chỉnh này không hề làm ảnh hưởng đến các phần tử khác . Nó gồm 5 giá trị là relative, absolute, fixed static và inherit. Absolute là cách định vị trí của một ...

Tạ Quốc Bảo viết 17:05 ngày 04/10/2018
0