Before CSS là gì

Nội dung bài viết

  • Đôi lời giới thiệu
  • Sử dụng như thế nào?
  • Một số ứng dụng hay ho:
    • Sử dụng để chèn icon
    • Sử dụng để tạo một số hover đẹp mắt
  • Tổng kết:

Đôi lời giới thiệu

:before và :after là phần mình coi là quan trọng nhất trong pseudo elements. rất hữu dụng trong nhiều trường hợp. :before vaf after, hiểu đơn giản là bạn sẽ tạo ra một phần tử giả phía trước content bên trong thẻ mà bạn chọn, after thì phía sau. Nhưng thường thì nó sẽ sử dụng cùng với thuộc tính position absolute nhiều hơn. Nói xuông thì có vẻ khó hiểu, cùng đi vào 1 số ví dụ nào.

Sử dụng như thế nào?

Trước khi thêm :before, :after

Sau khi sử dụng:

Lưu ý: khi sử dung before hay after, bắt buộc phải cócontent. Nếu bạn không có nhu cầu dùng, bạn có thể để : content : ;.

Đơn giản phải không?

Một số ứng dụng hay ho:

Sử dụng để chèn icon

Sử dụng để tạo một số hover đẹp mắt

Button
.button { color: #141414; outline: none; cursor: pointer; border: 2px solid currentcolor; background-color: transparent; text-transform: uppercase; padding: 10px 20px; position: relative; } .button:before { content: ''; position: absolute; top: 0; left: auto; right: 0; z-index: -1; width: 0px; height: 100%; background-color: #00a308; transition: 0.35s; } .button:hover:before { width: 100%; left:0; right: auto; }

kết quả :

See the Pen button effects by Duong Minh Phuc [@sheensilver] on CodePen.dark

Còn rất nhiều các ứng dụng khác của 2 pseudo elements này như tạo list-style, nav-item style, ttle style , tạo ribbon tam giác.. để các bạn khám phá.

Tổng kết:

qua bài này mình giới thiệu sơ qua về cách dùng :before và after. Uứng dụng của nó là rất nhiều, qua bài này mình hi vọng có thể giúp các bạn có thêm 1 công cụ hữu ích để viết css. Hẹn gặp các bạn tại bài sau.

Video liên quan

Chủ Đề