Làm đẹp cho title với CSS

Thuộc tính title thường được sử dụng như một mô tả ngắn khi người dùng di chuột qua một liên kết hoặc một hình ảnh trên website. Điều này giúp cung cấp thông tin bổ sung về nội dung của phần tử đó cho người dùng mà không cần phải thêm nhiều văn bản vào trang web

Tuy nhiên, title mặc định thường nhìn rất nhàm chán và nó không hiển thị ngay khi bạn rê chuột đến. Và ở bài viết này mình sẽ hướng dẫn cách thêm style cho title.

Demo

Để hiểu rõ hơn, các bạn có thể rê chuột vào 2 link bên dưới để xem demo

Demo không áp dụng và Demo áp dụng

HTML

Để áp dụng thêm style cho title các bạn sử dụng HTML theo cú pháp sau:

<a href='/' data-title='Nội dung title'>Văn bản thay thế</a>

Lưu ý: Ở đoạn HTML trên mình đã thêm data- để phân biệt với các title khác có sẵn trên website của bạn tránh phá vỡ bố cục hiện tại. Nếu muốn áp dụng toàn bộ cho website bạn có thể xóa data- đi

CSS

Sử dụng CSS bên dưới để thêm style cho title

*[data-title]:before {
     content:attr(data-title);
     position:absolute;
     bottom:100%;
     left:0;
     z-index:10;
     margin-bottom:5px;
     background-color:#005b53;
     color:#eee;
     font-size:11px;
     font-weight:normal;
     text-shadow:none;
     padding:4px 10px 5px;
     width:auto;
     white-space:nowrap;
     display:none;
     border-radius:5px;
}
*[data-title]:hover {
     position:relative
}
*[data-title]:hover:before {
     display:block
}

Lưu ý:

• Nếu ở đoạn HTML bạn đã xóa data- thì ở CSS bạn cũng phải xóa data- đi thì mới hoạt động nhé
• Ngoài ra, các bạn hãy sửa lại màu sắc và bố cục sao cho phù hợp với template của mình nhé 😀

Mở rộng ra, các bạn có thể áp dụng cho cả thuộc tính alt bằng *[alt] hoặc đường link bằng *[href]. Chúc anh em một ngày vui! 😁