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

Quản trị viên 03:48 #CSS #Thủ Thuật 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)
}

#CSS #Thủ Thuật Blogspot