Hiện địa chỉ liên kết khi rê chuột vào link bằng CSS

Như hầu hết mọi người cũng biết, hiện tại thì thẻ đối với những link mà chúng ta sử dụng cho website thường thì trông khá là vô vị. Hầu hết thì chỉ có màu sắc khác với màu chữ bình thường, và nhiều lắm khi rê chuột vào chúng đổi màu. Cũng mới gần đây đảo lục lọi lại mấy bài viết cũ trên blog thì mình biết được bắt gặp một thứ khá hay ho từ CSS3 đó là thuộc tính content.

Khi người dùng rê chuột vài link mà chúng ta chèn vào bài viết thí nó sẽ hiển thị địa chỉ liên kết đó đi đâu. Mặc dù hầu hết mọi trình duyệt cũng sẵn đã hiện địa chỉ tại một góc nhỏ của nó, nhưng việc thêm vào như thế này sẽ làm cho người dùng dễ dàng nhìn thấy hơn và có phần đẹp hơn nữa.

Bạn có thể trỏ chuột vào link ở trên để xem demo, link hơi dài nên tương đối xấu nên bạn có thể rê chuột vào thử demo khác ở đây VuTienAnh Blog.
Hiện địa chỉ liên kết khi rê chuột vào link
Để thêm hiệu ứng nhỏ này vào Blogger / Blogspot thì khá đơn giản bạn chỉ cần chèn đoạn mã này lên trên thẻ ]]></b:skin> là xong

.post-body a { position:relative; }
.post-body a::before {
content:attr(href);
font-size:11px;
line-height:11px;
font-family:Arial,sans-serif;
text-transform:none;
padding:8px 12px;
top:-34px;
right:0px;
transition:.3s ease-out;
background:#222;
color:#fff;
border-radius:5px;
position:absolute;
opacity:0;
visibility:hidden;
}
.post-body a::after {
content:" ";
width:0;
height:0;
right:10px;
top:-7px;
transition:.3s ease-out;
border-color:#222 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
position:absolute;
opacity:0;
visibility:hidden;
}
.post-body a:hover::before, .post-body a:hover::after {
opacity:1.5;
visibility:visible;
}

Bạn nào biết css thì có thể tự chỉnh lại cho đẹp hơn nhé tại mình thấy nó vẫn chưa được đẹp lắm ^^. Sau khi hoàn tất thì lưu lại. Chúc bạn thành công!

Share :

Tweet

✚