Trang trí văn bản (Text Decoration) trong CSS

Để trang trí văn bản trong CSS, sử dụng thuộc tính text-decoration như một shorthand cho:

text-decoration-line text-decoration-color text-decoration-style

Ví dụ 1: Shorthand overline + underline

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Chi tiết</h1>
<p class="demo">Trung tâm thi gần trường ABC College.</p>
<p class="demo2">Kỳ thi bắt đầu lúc 9AM.</p>
</body>
</html>

Kết quả

Ví dụ 2: Tách riêng các thuộc tính

<!DOCTYPE html>
<html>
<head>
<style>
p {
  writing-mode: vertical-rl;
  text-decoration-line: overline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}
</style>
</head>
<body>
<h1>Tiêu đề Demo</h1>
<p>Đây là văn bản demo.</p>
</body>
</html>

Kết quả

Các thành phần:

Lưu ý: writing-mode: vertical-rl làm văn bản hiển thị dọc, kết hợp với overline tạo hiệu ứng độc đáo.