Beispiel für einen dynamischen Unterstreichungseffekt mit CSS

In diesem Artikel werden hauptsächlich Beispiele für dynamische CSS-Unterstreichungseffekte vorgestellt, in der Hoffnung, allen zu helfen.

Effektanzeige

Und die Unterstreichung hat die gleiche Farbe wie der Hyperlink... Sie können es selbst testen...

Implementierungsmethode

Dies Wir können problemlos CSS-Pseudoelemente verwenden, um diesen Effekt zu erzielen. Es verwendet hauptsächlich die Skalierung in der Transformation, um die Pseudoelemente zu skalieren und das Ergebnis einer Verlängerung der Pseudoelemente (Unterstreichung) zu erzielen. Verwenden Sie gleichzeitig transform-origin, um die Zoomrichtung zu steuern. Kopieren Sie den folgenden Quellcode, um ihn zu verwenden...

Der Quellcode lautet wie folgt

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;        }

Verwandte Empfehlungen:

Verwenden Sie CSS, um den gepunkteten Unterstreichungseffekt von links_CSS/HTML zu erzielen

Das obige ist der detaillierte Inhalt vonBeispiel für einen dynamischen Unterstreichungseffekt mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!