Mã css cho gạch dưới là gì?

Tóm tắt bài viết

1. Mở mã của bạn để chỉnh sửa.
2. Di chuyển đến văn bản được gạch chân.
3. Chèn thẻ SPAN trước và sau văn bản.
4. Sử dụng "trang trí văn bản. kiểu gạch chân".
5. Xác định phong cách trong CSS của bạn.
6. Lưu tài liệu của bạn.

Bản tóm tắt này có giúp ích gì cho bạn không? Có Không

Cảm ơn tất cả các tác giả đã tạo ra một trang đã được đọc 180.695 lần

Chúng tôi sử dụng thẻ, để gạch chân một văn bản trong HTML. Nó thể hiện một văn bản theo một phong cách khác với một văn bản khác trong nội dung của trang web

Chúng ta cũng có thể sử dụng thuộc tính style để gạch chân một văn bản trong HTML. Thuộc tính style chỉ định kiểu nội tuyến cho một phần tử. Thuộc tính này được sử dụng bên trong HTML

Tạo kiểu cho phần gạch chân nằm bên dưới các liên kết có thể là một công việc phức tạp và tôi thường xuyên quên cách tiếp cận tốt nhất tùy thuộc vào tình huống là gì. Tuy nhiên, rất may, John Jameson đã giúp chúng tôi bắt kịp tốc độ trong bài đăng của khách này

Có rất nhiều cách khác nhau để tạo kiểu cho gạch chân. Chắc các bạn còn nhớ bài Thủ thuật gạch chân link trên Medium. Phương tiện không cố gắng làm bất cứ điều gì điên rồ;

Một đường gạch chân mỏng, màu đen có khoảng trống xung quanh các phần dưới—thông qua Marcin Wichary, liên kết Crafting gạch chân trên Medium

Đó là một đường gạch chân khá cơ bản, nhưng nó có kích thước phù hợp và nó cũng bỏ qua phần gạch dưới. Chắc chắn đẹp hơn mặc định của hầu hết các trình duyệt. Chà, hóa ra Medium đã phải trải qua rất nhiều khó khăn để có được phong cách đó trên web. Hai năm sau, thật khó để tạo kiểu cho một đường gạch chân đẹp

Bàn thắng

Có gì sai khi chỉ sử dụng text-decoration: underline?

• Định vị chính nó bên dưới đường cơ sở
• Bỏ qua hậu duệ
• Thay đổi màu sắc, độ dày và kiểu dáng
• Lặp lại trên văn bản được bao bọc
• Làm việc trên bất kỳ nền nào

Tôi nghĩ rằng đây là tất cả những điều khá hợp lý để yêu cầu, nhưng theo như tôi biết, không có cách trực quan nào để đạt được tất cả chúng trong CSS

phương pháp tiếp cận

Vì vậy, tất cả những cách khác nhau mà chúng ta có thể gạch dưới văn bản trên web là gì?

Đây là những cái tôi có thể nghĩ ra

• text-decoration
• border-bottom
• box-shadow
• background-image
• bộ lọc SVG
• gạch dưới. js (vải)
• text-decoration-*

Hãy đi xuống danh sách từng cái một và nói về những phần tốt và xấu của từng phương pháp

trang trí văn bản

text-decoration là cách đơn giản nhất để gạch chân văn bản. Bạn áp dụng một thuộc tính duy nhất và đó là tất cả những gì cần làm. Ở kích thước nhỏ hơn, nó có thể trông khá ổn, nhưng tăng kích thước phông chữ và cùng một dòng bắt đầu cảm thấy vụng về

Xem bản trình diễn

Vấn đề lớn nhất với text-decoration là nó thiếu khả năng tùy biến. Nó sử dụng màu sắc và kích thước phông chữ của bất kỳ văn bản nào được áp dụng cho nó và không có cách nào để thay đổi kiểu trên nhiều trình duyệt. Thêm về điều đó sau

Tốt

• dễ sử dụng
• Định vị bên dưới đường cơ sở
• Bỏ qua hậu duệ theo mặc định trong Safari và iOS
• Kết thúc tốt đẹp trên các dòng
• Hoạt động trên mọi nền

Xấu

• Không thể bỏ qua hậu duệ trong các trình duyệt khác
• Không thể thay đổi màu sắc, độ dày hoặc kiểu dáng

viền dưới

border-bottom cung cấp sự cân bằng tốt giữa nhanh chóng và tùy biến. Cách tiếp cận này sử dụng đường viền CSS đã được thử và đúng, có nghĩa là bạn có thể thay đổi màu sắc, độ dày và kiểu dáng một cách dễ dàng

Đây là giao diện của border-bottom trên các phần tử text-decoration0

Xem bản trình diễn

Vấn đề quan trọng là phần gạch chân cách văn bản bao xa — nó hoàn toàn nằm dưới phần gạch dưới. Bạn có thể giải quyết vấn đề đó bằng cách tạo các phần tử text-decoration1 và giảm text-decoration2, nhưng sau đó bạn sẽ mất khả năng ngắt dòng văn bản. Tốt cho các dòng đơn, nhưng không nhiều

Xem bản trình diễn

Ngoài ra, bạn có thể sử dụng text-decoration3 để che các phần của đường kẻ gần các đường kẻ đi xuống, nhưng bạn phải giả mạo nó bằng cách sử dụng cùng màu với bất kỳ nền nào mà nó có trên đó. Điều đó có nghĩa là nó chỉ hoạt động đối với nền đồng màu chứ không phải chuyển màu hoặc hình ảnh

Xem bản trình diễn

Tại thời điểm này, có bốn thuộc tính tạo kiểu cho một gạch dưới. Đó là công việc nhiều hơn text-decoration

Tốt

• Có thể bỏ qua con cháu bằng cách sử dụng text-decoration3
• Có thể thay đổi màu sắc, độ dày và kiểu dáng
• Có thể chuyển đổi và tạo hiệu ứng màu sắc và độ dày
• Kết thúc theo mặc định trừ khi đó là text-decoration1
• Hoạt động trên mọi nền trừ khi sử dụng text-decoration3

Xấu

• Vị trí xa và khó định vị lại
• Rất nhiều tài sản không liên quan để làm cho nó vừa phải
• Lựa chọn văn bản Janky khi sử dụng text-decoration3

bóng hộp

box-shadow vẽ một đường gạch dưới với hai bóng hộp bên trong. một để tạo hình chữ nhật và một để che nó lại. Điều đó có nghĩa là bạn sẽ cần một nền tảng vững chắc để điều này hoạt động

Xem Bút Gạch Chân 5. bóng hộp của John D. Jameson (@johndjameson) trên CodePen

Bạn có thể sử dụng thủ thuật text-decoration3 tương tự để giả mạo khoảng cách giữa phần gạch chân và phần xuống dòng của văn bản. Nhưng nếu dòng có màu khác với văn bản — hoặc thậm chí chỉ vừa đủ mỏng — thì nó không thực sự xung đột như text-decoration

Tốt

• Có thể được định vị bên dưới đường cơ sở
• Có thể bỏ qua con cháu bằng cách sử dụng text-decoration3
• Có thể thay đổi màu sắc và độ dày
• Kết thúc tốt đẹp trên các dòng

Xấu

• Không thể thay đổi phong cách
• Không hoạt động trên bất kỳ nền nào

hình nền

background-image đến gần nhất với mọi thứ chúng tôi muốn và với ít vấn đề nhất. Ý tưởng là bạn sử dụng border-bottom4 và border-bottom5 để tạo một hình ảnh tự lặp lại theo chiều ngang trên các dòng văn bản

Bạn cũng sẽ phải border-bottom6 cách tiếp cận này

Xem bản trình diễn

Cách tiếp cận này cũng không phải sử dụng border-bottom4. Bạn có thể mang theo hình nền của riêng mình để có một số hiệu ứng thú vị

Xem bản trình diễn

Tốt

• Có thể được định vị bên dưới đường cơ sở
• Có thể bỏ qua con cháu bằng cách sử dụng text-decoration3
• Có thể thay đổi màu sắc, độ dày (cho phép một nửa pixel) và kiểu
• Hoạt động với hình ảnh tùy chỉnh
• Kết thúc tốt đẹp trên các dòng
• Hoạt động trên mọi nền trừ khi sử dụng text-decoration3

Xấu

• Hình ảnh có thể thay đổi kích thước khác nhau theo độ phân giải, trình duyệt và mức thu phóng

bộ lọc SVG

Đây là một cách tiếp cận mà tôi đã thử nghiệm. bộ lọc SVG. Bạn có thể tạo một phần tử SVG box-shadow0 nội tuyến để vẽ một dòng và sau đó mở rộng văn bản để che đi các phần của dòng mà chúng ta muốn làm trong suốt. Sau đó, bạn có thể cung cấp cho box-shadow0 một box-shadow2 và tham chiếu nó trong CSS bằng một cái gì đó như box-shadow3

Ưu điểm ở đây là bộ lọc bổ sung độ trong suốt mà không cần dựa vào text-decoration3. Điều đó có nghĩa là bạn có thể bỏ qua phần giảm dần trên bất kỳ nền nào, bao gồm cả độ dốc và hình nền. Tuy nhiên, cái này chỉ hoạt động trên một dòng văn bản, vì vậy hãy chú ý đến điều đó

Xem bản trình diễn

Đây là giao diện của nó trong Chrome và Firefox

Hỗ trợ trình duyệt trong IE, Edge và Safari có vấn đề. Thật khó để kiểm tra hỗ trợ bộ lọc SVG trong CSS. Bạn có thể sử dụng box-shadow5 với box-shadow0, nhưng điều đó chỉ kiểm tra xem tham chiếu có hoạt động hay không — không phải bản thân bộ lọc được áp dụng. Cách tiếp cận của tôi cuối cùng cũng thực hiện một số thao tác đánh hơi trình duyệt khá thô thiển, vì vậy hãy đề phòng gấp đôi về điều đó

ưu

• Định vị bên dưới đường cơ sở
• Bỏ qua hậu duệ
• Có thể thay đổi màu sắc, độ dày và kiểu dáng
• Hoạt động trên mọi nền

Nhược điểm

• Không quấn ngang dòng
• Không hoạt động trong IE, Edge hoặc Safari, nhưng bạn có thể quay lại text-decoration. Dù sao thì phần gạch dưới của Safari trông vẫn đẹp

gạch dưới. js (Canvas)

gạch dưới. js thật hấp dẫn. Tôi nghĩ những gì Wenting Zhang có thể làm với JavaScript và sự chú ý đến từng chi tiết là cực kỳ ấn tượng. Nếu bạn chưa thấy phần gạch dưới. js tech demo trước đây, chắc chắn hãy dừng đọc một phút và xem thử. Có một cuộc nói chuyện hấp dẫn kéo dài 9 phút về cách thức hoạt động của nó, nhưng tôi sẽ cung cấp cho bạn phiên bản ngắn. nó vẽ gạch dưới với các yếu tố box-shadow8. Đó là một cách tiếp cận mới hoạt động tốt một cách đáng ngạc nhiên

Mặc dù cái tên hấp dẫn, Underline. js chỉ là bản demo công nghệ. Điều đó có nghĩa là bạn sẽ không thể thả nó vào bất kỳ dự án nào mà không sửa đổi toàn bộ nó trước.

Thật đáng để đưa nó lên đây như một bằng chứng về khái niệm. box-shadow8 có khả năng tạo ra những gạch dưới tương tác, đẹp mắt, nhưng bạn sẽ phải viết một số JavaScript tùy chỉnh để chúng hoạt động

thuộc tính text-decoration-*

Bạn có nhớ phần “thêm về điều đó sau” không?

Bản thân text-decoration hoạt động tốt nhưng bạn có thể thêm một số thuộc tính thử nghiệm để tùy chỉnh giao diện của nó

• background-image1
• background-image2
• background-image3

Đừng quá phấn khích. Bạn biết đấy, hỗ trợ trình duyệt

văn bản-trang trí-màu sắc

background-image1 cho phép bạn thay đổi màu gạch dưới tách biệt với màu văn bản của nó. Thuộc tính thậm chí còn hỗ trợ trình duyệt tốt hơn mong đợi — nó hoạt động trong Firefox và có tiền tố trong Safari. Đây là bắt. Nếu bạn không xóa dòng xuống, Safari sẽ đặt dòng này lên trên văn bản. 🙃

firefox

Cuộc đi săn

văn bản-trang trí-bỏ qua

background-image2 bật/tắt bỏ qua phần xuống dưới trong văn bản được gạch chân

Thuộc tính này không chuẩn và hiện chỉ hoạt động trong Safari, vì vậy bạn cần có tiền tố background-image6 để sử dụng thuộc tính này. Mặc dù vậy, Safari bật thuộc tính này theo mặc định, đó là lý do tại sao gạch dưới bỏ qua phần xuống ngay cả trên các trang web không chỉ định nó

Nếu bạn đang sử dụng Chuẩn hóa, hãy biết rằng các phiên bản gần đây sẽ vô hiệu hóa thuộc tính này để giữ cho mọi thứ nhất quán giữa các trình duyệt. Bạn cần bật lại nếu muốn có những đường gạch chân đẹp như mơ đó

văn bản-trang trí-phong cách

background-image3 cung cấp các loại dòng giống như bạn mong đợi từ background-image8, nhưng cũng thêm vào dòng background-image9

Dưới đây là các giá trị khác nhau mà bạn có thể sử dụng

• text-decoration-*0
• text-decoration-*1
• text-decoration-*2
• text-decoration-*3
• background-image9

Hiện tại, background-image3 chỉ hoạt động trong Firefox, vì vậy đây là ảnh chụp màn hình

Một loạt các kiểu gạch chân đồng màu

Nhìn quen không?

Cái gì còn thiếu?

Thuộc tính text-decoration-* trực quan hơn nhiều so với việc sử dụng các thuộc tính CSS khác để tạo kiểu cho phần gạch chân. Nhưng nếu chúng ta xem xét lại các yêu cầu trước đây của mình, các thuộc tính này không cung cấp cách xác định độ dày hoặc vị trí của đường kẻ

Sau khi thực hiện một nghiên cứu nhỏ, tôi đã tìm thấy hai thuộc tính này

• text-decoration-*7
• text-decoration-*8

Có vẻ như chúng đã được giới thiệu trong các bản nháp CSS trước đó, nhưng chưa bao giờ được triển khai do thiếu sự quan tâm. Này, đừng đổ lỗi cho tôi

mang đi

Vì vậy, cách tốt nhất để gạch chân văn bản là gì?

nó phụ thuộc

Đối với văn bản nhỏ, tôi khuyên bạn nên sử dụng text-decoration và sau đó áp dụng một cách lạc quan background-image2 ở trên cùng. Nó trông hơi nhạt nhẽo trong hầu hết các trình duyệt, nhưng phần gạch chân đã trông như vậy mãi mãi và mọi người dường như không bận tâm. Ngoài ra, luôn có khả năng nếu bạn đủ kiên nhẫn, tất cả các đường gạch dưới của bạn sẽ trông tuyệt vời sau này mà bạn không cần phải thay đổi bất cứ điều gì

Đối với nội dung văn bản, có thể sử dụng cách tiếp cận background-image. Nó hoạt động, trông rất tuyệt và có Sass mixin cho nó. Bạn có thể bỏ qua nó text-decoration3 nếu gạch dưới quá mỏng hoặc có màu khác với văn bản

Đối với một dòng văn bản, hãy sử dụng border-bottom và bất kỳ thuộc tính nào khác mà bạn muốn đi cùng với nó

Và để bỏ qua các phần giảm dần ở trên cùng của hình nền hoặc gradient, hãy thử sử dụng các bộ lọc SVG. Hoặc chỉ cần tránh sử dụng gạch chân hoàn toàn

Trong tương lai khi trình duyệt hỗ trợ tốt hơn, câu trả lời là text-decoration-* luôn

---

Ngoài ra, hãy xem bài đăng CSS Underlines Suck của Benjamin Woodruff, bài đăng này tình cờ tiếp cận vấn đề này theo cách tương tự