p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
4 và p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
5 chỉ định vị trí của nội dung trước và sau nội dung cây tài liệu của phần tử. Thuộc tính p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6, kết hợp với các phần tử giả này, chỉ định nội dung được chèn. Đối với những người dùng cần tùy chỉnh hoặc tắt thông tin kiểu để xem nội dung theo nhu cầu của họ, các công nghệ hỗ trợ có thể không truy cập được thông tin được chèn bằng CSS. Do đó, không thể sử dụng các thuộc tính này để chèn nội dung không trang trí Thuộc tính
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6 trong CSS xác định nội dung của một phần tử. Bạn có thể đã nghe nói rằng thuộc tính này chỉ áp dụng cho các phần tử giả p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
8 và p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
0. Trong bài viết này, chúng ta sẽ khám phá các trường hợp sử dụng khác nhau cho thuộc tính p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6, bao gồm cả bên ngoài các phần tử giảĐiều kiện tiên quyết
Vì phần lớn các trường hợp sử dụng cho thuộc tính
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6 liên quan đến các phần tử giả, nên tôi khuyên bạn nên làm quen với cách thức hoạt động của các phần tử giả p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
8 và p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
0. Đây là một bài viết tuyệt vời để giúp bạn tăng tốc- Phần tử giả CSS - Giải thích về bộ chọn trước và sau
Giá trị được chấp nhận
Trước tiên, chúng ta hãy xem tất cả các giá trị được chấp nhận của thuộc tính
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6
6. Đây là giá trị mặc định. Tính toán thànhp { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba[0, 0, 0, 0.5] }
7 khi được sử dụng với các phần tử giảp { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba[0, 0, 0, 0.5] }
7. Phần tử giả sẽ không được tạop { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba[0, 0, 0, 0.5] }
9. Đặt nội dung thành chuỗi được chỉ định. Chuỗi này có thể chứa các chuỗi thoát Unicode. Ví dụ, biểu tượng bản quyền.p { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba[0, 0, 0, 0.5] }
0q { quotes: '“' '”' '‘' '’' '“' '”'; }
1. Đặt nội dung thành hình ảnh hoặc độ dốc bằng cách sử dụngq { quotes: '“' '”' '‘' '’' '“' '”'; }
2 hoặcq { quotes: '“' '”' '‘' '’' '“' '”'; }
3q { quotes: '“' '”' '‘' '’' '“' '”'; }
4.q { quotes: '“' '”' '‘' '’' '“' '”'; }
5. Đặt nội dung thành ký tự trích dẫn thích hợp được tham chiếu từ thuộc tínhq { quotes: '“' '”' '‘' '’' '“' '”'; }
6q { quotes: '“' '”' '‘' '’' '“' '”'; }
7.q { quotes: '“' '”' '‘' '’' '“' '”'; }
8. Xóa một trích dẫn khỏi phần tử đã chọn, nhưng vẫn tăng hoặc giảm mức lồng nhau được tham chiếu từ thuộc tínhq { quotes: '“' '”' '‘' '’' '“' '”'; }
6q { quotes: '“' '”' '‘' '’' '“' '”'; }
60. Đặt nội dung làm giá trị chuỗi của các phần tử được chọn thuộc tính đã chọnp { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba[0, 0, 0, 0.5] }
61. Đặt nội dung là giá trị của mộtp { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba[0, 0, 0, 0.5] }
62, thường là một sốp { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba[0, 0, 0, 0.5] }
Chuỗi
Một trong những ví dụ cơ bản nhất là việc sử dụng thêm nội dung chuỗi trước hoặc sau một phần tử. Trong ví dụ này, chúng tôi sẽ thêm một biểu tượng liên kết trước một liên kết và thêm URL cho liên kết sau nó
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
9Lưu ý khoảng trắng sau ký tự Unicode trong phần tử giả
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
8 và trước dấu ngoặc đơn đầu tiên trong phần tử giả p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
0. Điều này sẽ tạo khoảng cách giữa chúng và phần tử chaNgoài ra, bạn có thể thêm
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
65 hoặc p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
66 vào phần tử giả để thêm phân táchbáo giá cơ bản
Với thuộc tính
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6, bạn có thể thêm dấu ngoặc kép trước và/hoặc sau phần tử. Bây giờ, trong HTML chúng ta có thẻ p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
68. Điều này cũng sẽ thêm dấu ngoặc kép xung quanh nội dung của nó. Tuy nhiên, với thuộc tính p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6, chúng ta có thể kiểm soát nhiều hơn việc triển khaiĐây là ví dụ cơ bản nhất về việc thêm dấu ngoặc kép
Bạn cũng có thể thực hiện việc này bằng cách sử dụng thẻ HTML
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
68. Nhưng có lẽ chúng tôi muốn tạo kiểu cho câu trích dẫn theo cách khác. Vì vậy, hãy chỉ thêm trích dẫn mở đầu và không thêm trích dẫn kết thúc. Và chúng ta cũng hãy tạo kiểu cho câu trích dẫn mở đầup {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
Kết quả
báo giá nâng cao
Chúng tôi cũng có thể chỉ định nơi chúng tôi không muốn trích dẫn. Ví dụ: bạn có thể đang trích dẫn một người đang trích dẫn một người khác. Vì vậy, bạn sẽ có các trích dẫn trong các trích dẫn, điều này có thể gây nhầm lẫn cho người đọc
Trong CodePen bên dưới, chúng tôi đang sử dụng thẻ HTML
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
68, sau đó chỉ định thẻ nào sẽ không hiển thị dấu ngoặc képThoạt nhìn, bạn có thể nghĩ rằng chúng ta chỉ nên xóa thẻ
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
68 khi cần thiết. Nhưng bằng cách chỉ định vị trí không nên trích dẫn vẫn tăng hoặc giảm mức lồng nhau được tham chiếu từ thuộc tính q {
quotes: '“' '”' '‘' '’' '“' '”';
}
6Để giải thích điều này, chúng ta cần hiểu thuộc tính
q {
quotes: '“' '”' '‘' '’' '“' '”';
}
6. Đây chỉ đơn giản là một "mảng" các ký tự nên được sử dụng khi trích dẫn. Đây là một ví dụq {
quotes: '“' '”' '‘' '’' '“' '”';
}
Đây là những bộ trích dẫn. Bộ đầu tiên sẽ được sử dụng cho cấp báo giá cao nhất. Bộ thứ hai sẽ được sử dụng cho trích dẫn lồng nhau đầu tiên. Và bộ thứ ba sẽ được sử dụng cho trích dẫn lồng nhau thứ hai. Và cứ thế, nếu có nhiều bộ hơn
Bây giờ chúng ta đã hiểu thuộc tính
q {
quotes: '“' '”' '‘' '’' '“' '”';
}
6, tôi có thể giải thích cách hoạt động của thuộc tính q {
quotes: '“' '”' '‘' '’' '“' '”';
}
7 và q {
quotes: '“' '”' '‘' '’' '“' '”';
}
8Với mỗi cấp độ của dấu ngoặc kép, chúng ta có thể gán các bộ ký tự khác nhau để sử dụng cho dấu ngoặc kép. Bằng cách chỉ định vị trí không nên tăng hoặc giảm một trích dẫn, mức lồng nhau được tham chiếu từ thuộc tính
q {
quotes: '“' '”' '‘' '’' '“' '”';
}
6Hãy xem ví dụ dưới đây. Bạn sẽ thấy rằng cấp độ trích dẫn thứ hai bị bỏ qua
Thuộc tính
Các thuộc tính có thể được sử dụng để chuyển nội dung từ HTML vào thuộc tính CSS
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6. Chúng tôi thực sự đã sử dụng điều này trong ví dụ liên kết nơi chúng tôi sử dụng thuộc tính p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
50 để bao gồm chuỗi URL như một phần nội dung của chúng tôiMột trường hợp sử dụng hoàn hảo cho điều này là một chú giải công cụ. Bạn có thể thêm thuộc tính
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
51 vào một phần tử trong HTML để có chú giải công cụ tích hợp, đơn giản khi di chuột. Nhưng để tùy chỉnh điều này, chúng ta có thể sử dụng thuộc tính dữ liệu trên thẻ HTML của mình, sau đó sử dụng thuộc tính p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6 để thêm chú giải công cụTrong ví dụ này, chúng tôi sử dụng thuộc tính
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
53 từ phần tử HTML của mình để chuyển giá trị vào chú giải công cụ của chúng tôi. Đối với con trỏ của chú giải công cụ, chúng tôi đặt p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6 thành p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
55, vì cần có p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6 để hiển thị phần tử giả p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
8 hoặc p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
0quầy
Hàm CSS
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
61 trả về một chuỗi đại diện cho giá trị hiện tại của bộ đếm được đặt tên. Trong ví dụ sau, chúng tôi có một danh sách được sắp xếp mà chúng tôi sẽ thêm nội dung bằng cách sử dụng p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
62p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
3Không đi sâu vào hàm
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
62, trước tiên chúng ta phải khởi tạo bộ đếm trên phần tử p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
52. Chúng tôi có thể đặt tên này bất cứ điều gì chúng tôi muốn. Sau đó, chúng tôi yêu cầu bộ đếm tăng dần trên mỗi phần tử p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
53. Và cuối cùng, chúng tôi đặt p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6 của p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
55Đây là kết quả
Bạn có thể sử dụng điều này để tùy chỉnh nội dung trong mỗi mục danh sách cần một số tương ứng. Hoặc bạn có thể sử dụng điều này để tùy chỉnh mục danh sách. Chẳng hạn, bạn có thể xóa cách đánh số mặc định và triển khai hệ thống đánh số theo kiểu tùy chỉnh
Hình ảnh
Hình ảnh và độ dốc có thể được sử dụng với thuộc tính
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6. Điều này khá đơn giản. Đây là một ví dụ sử dụng cả haiĐối với khả năng truy cập, cũng có một tùy chọn để thêm văn bản thay thế cho hình ảnh. Tính năng này không được hỗ trợ đầy đủ mặc dù
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
5Ghi chú. Điều này không được hỗ trợ trong Firefox, IE và Safari. Ngoài ra, gradient không hoạt động trong Firefox
Bên ngoài các yếu tố giả
Đúng rồi. Bạn có thể sử dụng thuộc tính
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6 bên ngoài các phần tử giả p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
8 và p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
0. Mặc dù, việc sử dụng nó bị hạn chế và không tương thích hoàn toàn trong tất cả các trình duyệtTrường hợp sử dụng tương thích nhất sẽ là thay thế một phần tử
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
5p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
1Ghi chú. Thay thế không được hỗ trợ trong IE
Phần kết luận
Hầu hết các lần bạn sẽ thấy
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
10 được tìm thấy trong các phần tử giả p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
8 và p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
0. Nhưng thuộc tính p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6 có nhiều ứng dụng hữu íchTheo tôi, cách sử dụng tốt nhất là sử dụng nó để cập nhật các phần tử hàng loạt. Nếu bạn muốn thêm một biểu tượng trước mỗi liên kết trên trang web của mình, việc thêm nó thông qua thuộc tính
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6 sẽ dễ dàng hơn nhiều so với việc thêm nó vào mọi thành phần trong tài liệu HTMLCảm ơn vì đã đọc
Cảm ơn bạn đã đọc bài viết này. Hi vọng đã giúp bạn hiểu rõ hơn về cách thức hoạt động của thuộc tính
p {
position: relative;
font-size: 3rem;
margin: 4rem;
}
p::before {
content: open-quote;
position: absolute;
left: -3.5rem;
top: -2rem;
font-size: 8rem;
color: rgba[0, 0, 0, 0.5]
}
6 trong CSS- Đăng ký YouTube của tôi
- nói xin chào. Instagram. Twitter
- Hãy đăng ký để nhận thư mới từ tôi
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Tutorials for all things ?? Let me help you on your journey to becoming a web developer. Support me by subscribing to my YouTube channel ▶️ and newsletter ? codeSTACKr.com
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu