Thủ thuật hiện chi tiết đường link khi hover bằng CSS cho Blogspot

Thủ thuật này mình cũng không biết phải miêu tả như thế nào. Đơn giản là hiển thị link khi bạn rê chuột vào một liên kết trong blog, để hiểu rõ hơn thì xem demo ngay tại đây. Rê chuột vào liên kết dưới đây hoặc bất cứ liên kết nào trong phần bài viết này.

Hover Me

Cách thực hiện

Thêm toàn bộ CSS bên dưới vào Template là xong!
.post-body a::before {
content: attr(href);
float: none;
clear: both;
font-size: 22px;
font-family: "Roboto", sans-serif;
font-weight: 300;
text-transform: none;
padding: 15px 0;
background: #fff;
color: #55579e;
border-radius: 0;
position: fixed;
opacity: 0;
left: 0;
top: 0;
visibility: hidden;
transform: scaleY(0);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
width: 100%;
transition: .3s ease-in-out;
z-index: 999;
margin: 0 auto;
}

.post-body a:hover::before {
opacity: 1;
visibility: visible;
transform: scaleY(1)
}
- - 0 bình luận - lượt xem
https://pro.bacsiwindows.com/2018/07/thu-thuat-hien-chi-tiet-uong-link-khi.html

BÌNH LUẬN (0)

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé