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: Show Nội dung chính ShowShow
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).
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).
Đâ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ò
2 ::after và ::before selector là gì?::after và ::before selector là gì? Ví dụ 1: Thêm dấu * vào trường bắt buộc trong form Ví dụ 2: Hiệu ứng khi hover cho text Thật đơn giản phải không nào. 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). ::after và ::before selector là gì?Ví dụ 1: Thêm dấu * vào trường bắt buộc trong form Ví dụ 2: Hiệu ứng khi hover cho text Thật đơn giản phải không nào. /* Add an arrow after links */ a::after { content: "→"; } 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). Ví dụ 1: Thêm dấu * vào trường bắt buộc trong formVí dụ 2: Hiệu ứng khi hover cho text <label class="required">Full name</label> <input type="text" placeholder="e.g. John Doe" /> <style> .required:after { content: " *"; color: red; } </style> Thật đơn giản phải không nào. Thật đơn giản phải không nào. Ví dụ 2: Hiệu ứng khi hover cho textThật đơn giản phải không nào. <a href="#" class="link">Green</a> <style> .link { text-decoration: none; color: green; position: relative; transition: color ease 0.3s; } .link:hover { color: #fff; } .link:after { content: ' '; position: absolute; z-index: -1; width: 100%; height: 5%; left:0; bottom: 0; background-color: green; transition: all ease 0.3s; } .link:hover::after { height: 100% } Thật đơn giản phải không nào. 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). <div class="hamburger-menu"></div> <style> .hamburger-menu { margin-top: 20px; width: 50px; height: 6px; background: #000; position: relative; } .hamburger-menu::before, .hamburger-menu::after { content: ''; position: absolute; width: 50px; height: 6px; background: #000; } .hamburger-menu::before{ top:-16px; } .hamburger-menu::after { top: 16px; } </style> Thật đơn giản phải không nào. Thật đơn giản phải không nào.Ví dụ 2: Hiệu ứng khi hover cho text <div lang="en"> <blockquote>Stay hungry. Stay foolish.</blockquote> <cite>- Steve Jobs</cite> </div> <style> blockquote::before { content: open-quote; } blockquote::after { content: close-quote; } blockquote::before, blockquote::after { display: inline-block; vertical-align: bottom; color: lightgray; font-size: 4em; top: .2em; position: relative; } </style> Thật đơn giản phải không nào. Thật đơn giản phải không nào.Ví dụ 2: Hiệu ứng khi hover cho text Thật đơn giản phải không nào. |