How to make Custom Text Decoration Style - CSS Hover Effects - Tutorial

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng Custom Text Decoration Style đơn giản chỉ bằng CSS3 nhưng không kém phần ấn tượng.

How to change Text Decoration style.

<p>How to change <a id="text-effect" href="javascript:"><span>Text Decoration</span></a> style.</p>

#text-effect {
    position: relative;
    color: #262626;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    padding: 0 5px;
    span {
        position: relative;
        z-index: 2;
    }
    &amp;:before {
        content: "";
        position: absolute;
        left: 5%;
        bottom: 0;
        width: 90%;
        height: 1px;
        background: #262626;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        z-index: 1;
    }
    &amp;:hover {
        color: #fff;
        &amp;:before {
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
}

0 thảo luận về How to make Custom Text Decoration Style - CSS Hover Effects - Tutorial

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục