Dưới đây là ví dụ trực quan:

Đây là một hiệu ứng gạch chân giúp thu hút sự chú ý vào từ khóa hoặc liên kết trong nội dung.

1. CSS tạo hiệu ứng gạch chân highlight

.highlight-text {
    background-color: #fff;
    background-image: linear-gradient(120deg, #9cff00 0%, #9cff00 100%);
    background-repeat: no-repeat;
    background-size: 100% 0.4em;
    background-position: 0 100%;
}

Hiệu ứng hoạt động bằng cách chèn một lớp nền gradient mỏng (dạng highlight) nằm ngay phía dưới chữ.

2. HTML sử dụng

<span class="highlight-text">từ khóa nổi bật</span>

Bạn có thể dùng trong thẻ <p>, <a>, <li>, hoặc bất kỳ nội dung văn bản nào.

3. Gợi ý mở rộng

• Thay đổi màu highlight bằng cách chỉnh #9cff00 trong linear-gradient()
• Có thể áp dụng hiệu ứng transition để tạo cảm giác “gạch khi hover”
• Kết hợp với bold/italic để tăng độ nổi bật

Kết luận

Với chỉ một lớp CSS ngắn gọn, bạn đã có thể tạo ra hiệu ứng bắt mắt tương tự bút highlight để nhấn mạnh từ khóa quan trọng. Đây là thủ thuật nhỏ nhưng rất hiệu quả trong thiết kế UI hiện đại.