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>

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
}