Thuộc tính text-underline-offset trong CSS
Bùi Tấn Lực - 855
- 02/10/2025
Chức năng của Thuộc tính text-underline-offset trong CSS
Thuộc tính text-underline-offset trong CSS kết hợp với giá trị underline (gạch dưới ) của thuộc tính text-decoration hoặc thuộc tính text-decoration-line để tính khoảng cách từ văn bản trong HTML tới đường gạch dưới, đơn vị tính khoảng cách là: px, em, %, auto.
Cú pháp của Thuộc tính text-underline-offset trong CSS
text-underline-offset: giatri;
giatri: Giá trị để tính khoảng cách từ văn bản tới đường gạch dưới trong phần tử HTML (Ví dụ: 5px, 10px, 90%,....)
Code Thuộc tính text-underline-offset trong CSS
text-underline-offset: 10px;
text-underline-offset: 5px;
text-underline-offset: 90%;
text-underline-offset: 60%;
text-underline-offset: 10px;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-underline-offset trong CSS</title>
<style>
p{margin-bottom:30px}
.underline-don{text-decoration: underline;}
.underline-wavy{text-decoration: underline wavy blue;}
.underline-line{text-decoration-line: underline; }
</style>
</head>
<body>
<h1>Code Thuộc tính text-underline-offset trong CSS</h1>
<p>Thuộc tính text-underline-offset trong CSS kết hợp với giá trị underline (gạch dưới ) của thuộc tính text-decoration hoặc thuộc tính text-decoration-line để tính khoảng cách từ văn bản tới đường gạch dưới, đơn vị tính khoảng cách là: px, em, %, auto.:</p>
<p class="underline-don" style="text-underline-offset: 10px;">text-underline-offset: 10px;</p>
<p class="underline-don" style="text-underline-offset: 5px;">text-underline-offset: 5px;</p>
<p class="underline-don" style="text-underline-offset: 90%;">text-underline-offset: 90%;</p>
<p class="underline-don" style="text-underline-offset: 60%;">text-underline-offset: 60%;</p>
<p class="underline-wavy" style="text-underline-offset: 10px;">text-underline-offset: 10px;</p>
<p class="underline-line" style="text-underline-offset: 20px;">text-underline-offset: 20px;</p>
</body>
</html>
Cách sử dụng text-underline-offset trong CSS hiệu quả
text-underline-offset phát huy hiệu quả khi cần kiểm soát vị trí của đường gạch chân thay vì để trình duyệt tự đặt theo mặc định. Khi kết hợp đúng với kiểu gạch chân, thuộc tính này giúp chữ dễ đọc hơn và tạo điểm nhấn rõ ràng cho các thành phần tương tác.
Điều chỉnh khoảng cách gạch chân theo kích thước chữ
Khoảng cách phù hợp nên được cân nhắc dựa trên kích thước và kiểu chữ đang sử dụng. Với văn bản nhỏ, khoảng cách quá lớn có thể khiến đường gạch chân tách khỏi chữ; ngược lại, khoảng cách quá nhỏ dễ làm đường gạch chân chạm hoặc gây rối phần chân ký tự.
.title {
text-decoration: underline;
text-underline-offset: 0.2em;
}
Dùng đơn vị em là một lựa chọn linh hoạt vì khoảng cách có thể thay đổi theo kích thước chữ. Cách này phù hợp với giao diện có nhiều cấp độ tiêu đề hoặc kích thước văn bản khác nhau.
Kết hợp text-underline-offset với text-decoration
text-underline-offset chỉ kiểm soát vị trí của đường gạch chân, vì vậy cần sử dụng cùng text-decoration để xác định kiểu trang trí văn bản. Có thể kết hợp thêm màu sắc, độ dày hoặc kiểu đường gạch để tạo hiệu ứng phù hợp với giao diện.
.link {
color: #1565c0;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
Cách kết hợp này đặc biệt hữu ích khi muốn đường gạch chân nổi bật nhưng vẫn giữ khoảng cách đủ thoáng với nội dung chữ.
Ứng dụng text-underline-offset cho liên kết trên website
Liên kết thường được gạch chân để người dùng dễ nhận biết, nhưng đường gạch chân đặt quá sát chữ có thể làm giao diện kém thoáng. Thiết lập text-underline-offset giúp tạo khoảng hở vừa phải, từ đó cải thiện khả năng quan sát mà không cần bỏ dấu hiệu nhận biết của liên kết.
a {
text-decoration: underline;
text-underline-offset: 3px;
}
a:hover {
text-underline-offset: 5px;
}
Trong giao diện thực tế, nên giữ khoảng cách ổn định và tránh tạo hiệu ứng thay đổi quá mạnh khi rê chuột. Mục tiêu chính là làm đường gạch chân rõ ràng, dễ nhìn và phù hợp với tổng thể thiết kế.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-underline-offset trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
