CSS를 활용한 동적 밑줄 효과 예시

이 기사는 CSS를 사용하여 동적 밑줄 효과를 얻는 예를 주로 공유합니다. 도움이 되기를 바랍니다.

효과 표시

그리고 밑줄은 하이퍼링크와 같은 색입니다... 직접 테스트해 보세요...

구현 방법

이 효과를 얻기 위해 CSS 의사 요소를 쉽게 사용할 수 있습니다. 의사 요소를 늘리는 결과(밑줄)를 얻기 위해 주로 변환의 크기 조정을 사용하여 의사 요소의 크기를 조정합니다. 동시에, 확대/축소 방향을 제어하려면 변환 원점을 사용하세요...

소스 코드는 다음과 같습니다

dom:

    <a href="#" class="super-link center">
        动态下划线中间伸展    </a>
    <a href="#" class="super-link left">
        动态下划线左边伸展    </a>

    <a href="#" class="super-link right">
        动态下划线右边伸展    </a>

css:

        .super-link{            position: relative;            text-decoration: none;            color: #000;        }
        /*伪元素是两个冒号*/
        .super-link::after{            content: '';            width: 100%;            height: 1px;/*设置伪元素的高度，这里是下划线的粗细*/
            position: absolute;            top: 100%;            left: 0;            background-color: currentColor;/*当前标签继承的文字颜色，这里让伪元素的背景色与父元素的文字颜色相同*/
            transform: scale(0);            transition:all .35s;        }
        .super-link:hover::after{            transform: scale(1);        }
        .left::after{            transform-origin: left;        }
        .right::after{            transform-origin: right;        }
        .center::after{            transform-origin: center;        }

관련 권장 사항:

CSS를 사용하여 링크의 점선 밑줄 효과 얻기 _CSS/HTML

위 내용은 CSS를 활용한 동적 밑줄 효과 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!