Hướng dẫn css arrow before after - mũi tên css trước sau

Tôi thích sử dụng các khối nội tuyến hơn định vị tuyệt đối. Ngoài ra,: trước và: sau khi tạo các phần tử con (bên trong) phần tử bạn chỉ định chúng trên (ở đầu và cuối). Đối với điều này, có lẽ tốt nhất là có một khối bao bọc (hoặc bên trong), như vậy:

    

        FLECHA
    

Sau đó, khối bên trong sẽ có được hầu hết các kiểu dáng, vì trình bao bọc chủ yếu ở đó để chứa: trước và: sau. Bao bọc (.arrow) cần phải có kích thước phông chữ: 0 (hoặc một số phương pháp khác để tạo không gian trắng xung quanh khối bên trong, .inner-marrow, đi xa).

.arrow {
    font-size: 0;
}
.inner-arrow {
    width:210px;
    height:40px;
    display: inline-block;
    background-color:#CBCBCB;
    text-align:center;
    font-size:20px;
    font-weight:bold;
    line-height:40px;
    vertical-align: middle;
}

Hầu hết các kiểu cho .arrow: trước và .arrow: sau đó sẽ giống nhau, vì vậy chúng tôi sẽ nhóm những thứ đó. Sau đó chỉ định sự khác biệt dưới đây (chúng phải ở dưới đây để ghi đè các kiểu chung).

.arrow:before,
.arrow:after {
    content:'';
    display: inline-block;
    width:0;
    height:0;
    border:20px solid transparent;
    vertical-align: middle;
}
.arrow:before {
    border-top-color: #CBCBCB;
    border-bottom-color: #CBCBCB;
    border-right-color: #CBCBCB;
}
.arrow:after {
    border-left-color: #CBCBCB;
}

Đây là tất cả trong một fiddle.

CSS – Cascading Style Sheets là một trong 3 bộ chân kinh mà bất cứ bạn nào bước vào thế giới lập trình Web đều sẽ phải kinh qua trên con đường cầu đạo. Ở bài viết hôm nay, chúng ta sẽ nói về 2 selector khá thú vị trong CSS, đó chính là ::after và ::before.

Hôm nay chúng ta sẽ thử làm hamburger menu theo phong cách CSS nhé. Thử đoạn code sau nhé:

Ví dụ 4: Câu trích dẫn xịn sò

• Bạn thử đoán xem đoạn code sau giúp chúng ta có gì nhé? CSS selector và CSS declaration
• Kết luận ::after và ::before selector là gì?
• Như vậy là qua bài viết này, mình đã chia sẻ với mọi người 4 ứng dụng thực tế của CSS ::before và ::after. Mong rằng nó cho bạn một góc nhìn và cách tiếp cận mới mẻ khi chúng ta sử dụng CSS trong công việc. Trong phần tiếp theo, mình sẽ giới thiệu đến các bạn 4 ứng dụng thực tế khác của 2 selectors thần thánh này nhé. Ví dụ 1: Thêm dấu * vào trường bắt buộc trong form
• Các bạn có thể tìm hiểu thêm về CSS trong bài viết liên quan sau nhé : CSS-in-JS là gì? Đôi nét về thư viện Styled-components Ví dụ 2: Hiệu ứng khi hover cho text
• ::after và ::before chắc chắn không còn là CSS selector xa lạ gì với các bạn đã biết về lập trình web. Tuy vậy, khi gặp một UI, có khi bạn lại không nghĩ đến nó có thể được tạo ra bằng cách sử dụng 2 selectors thần thánh này. Ở bài viết này, hãy cùng mình tìm hiểu 4 ví dụ thực tế có thể áp dụng 2 selectors này nhé. Ví dụ 3: Hamburger Menu
• Mục lục Ví dụ 4: Câu trích dẫn xịn sò
• 1 CSS selector và CSS declaration Kết luận

2 ::after và ::before selector là gì?

3 Ví dụ 1: Thêm dấu * vào trường bắt buộc trong form

4 Ví dụ 2: Hiệu ứng khi hover cho text

5 Ví dụ 3: Hamburger Menu

6 Ví dụ 4: Câu trích dẫn xịn sò

Ở bài viết hôm nay, chúng ta sẽ nói về 2 selector khá thú vị trong CSS, đó chính là ::after và ::before.::after và ::before.

::after và ::before selector là gì?

Trong CSS, ::after tạo ra một psudo-element ngay sau element được chọn, ::before tạo ra một psudo-element ngay trước element được chọn.

Ví dụ:

Bạn muốn thêm một mũi tên vào sau tất cả các link trong trang web, bạn có thể sử dụng CSS như sau:

/* Add an arrow after links */
a::after {
  content: "→";
}

Đây là định nghĩa cơ bản của ::after và ::before. Giờ chúng ta sẽ tới phần thú vị nhất, 8 ví dụ thực tế áp dụng ::after và ::before nhé.::after và ::before. Giờ chúng ta sẽ tới phần thú vị nhất, 8 ví dụ thực tế áp dụng ::after và ::before nhé.

Ví dụ 1: Thêm dấu * vào trường bắt buộc trong form

Trong một form, bạn thường thấy các trường bắt buộc hay có một dấu * để nhắc người dùng đây là trường bắt buộc. Để làm điều này, bạn hoàn toàn có thể sử dụng ::after.

Full name

Và kết quả là:

Thật đơn giản phải không nào.

Ví dụ 2: Hiệu ứng khi hover cho text

Bạn có muốn khi đưa chuột vào một link, gạch chân của text sẽ dần chuyển thành nền của text không? Thử đoạn code sau nhé:

Green

Và kết quả là:

Thật đơn giản phải không nào.

Ví dụ 2: Hiệu ứng khi hover cho text

  
Stay hungry. Stay foolish.
  - Steve Jobs

Và kết quả là:

Thật đơn giản phải không nào.

Ví dụ 2: Hiệu ứng khi hover cho text

Các bạn có thể tìm hiểu thêm về CSS trong bài viết liên quan sau nhé : CSS-in-JS là gì? Đôi nét về thư viện Styled-components