CSS3, Pseudoelement zeigt ein Beispiel dafür, wie sich die Unterstreichung nach beiden Seiten ausdehnt, wenn die Maus hinein bewegt wird

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von CSS3 + -Pseudoelementen vorgestellt, um den Effekt zu erzielen, dass Unterstreichungen beim Bewegen der Maus nach beiden Seiten erweitert werden. Der Artikel stellt es zunächst ausführlich vor, um das Verständnis für alle zu erleichtern, und bietet dann eine vollständige Beschreibung Beispielcode, auf den sich jeder beziehen kann. Wenn Sie ihn brauchen, kommen Sie und lernen Sie gemeinsam.

Werfen wir zunächst einen Blick auf die Renderings:

Implementierungsidee:

Positionieren Sie die Pseudoelemente :before und :after in der Mitte des unteren Teils des Elements und stellen Sie die Breite von 0 bis 100 % ein, um das zu erreichen Ziel.

Implementierungsmethode:

1 Definieren Sie zunächst ein Blockelement (Inline-Elemente haben keine Breite und Höhe) und ändern Sie den Stil in einen Hintergrund Farbe des hellgrauen Rechtecks, relative Positionierung festlegen.

HTML-Code

<p id="underline"></p>

CSS-Stil

#underline{

    width: 200px;

    height: 50px;

    background: #ddd;

    margin: 20px;

    position: relative;

}

2. Einstellungen: Before und :after sind zwei Pseudoelemente. Setzen Sie ihre Hintergrundfarbe auf Blau (d. h. die Farbe der Unterstreichung) und fixieren Sie die beiden Elemente mithilfe der absoluten Positionierung an der unteren mittleren Position von #underline.

CSS-Stil

#underline:before,

#underline:after{

    content: "";/*单引号双引号都可以，但必须是英文*/

    width: 0;

    height: 3px; /*下划线高度*/

    background: blue; /*下划线颜色*/

    position: absolute;

    top: 100%;

    left: 50%;

    transition: all .8s ; /*css动画效果，0.8秒完成*/

}

3. Legen Sie den Mausbewegungseffekt fest.

CSS-Stil

#underline:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/

    left:0%; 

    width:50%;

}

#underline:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/

    left: 50%; /*这句多余，主要是为了对照*/

    width: 50%;

}

Optimierung

1 wird erreicht Ja, aber kann der Zweck durch die Verwendung von zwei Pseudoelementen, eines mit 50 % Ausdehnung nach links und eines mit 50 % Ausdehnung nach rechts, erreicht werden, indem nur eines verwendet wird, das sich auf 100 % erstreckt?

CSS-Code

#underline:after{

    content: "";

    width: 0;

    height: 5px;

    background: blue;

    position: absolute;

    top: 100%;

    left: 50%;

    transition: all .8s;

}

#underline:hover:after{/*原理是left:50%变成0%的同时，宽度从0%变成100%*/

    left: 0%;

    width: 100%;

}

2. Definieren Sie nur das :after-Pseudoelement und verschieben Sie es mit a um 50 % von links Breite von 0 Dies kann erreicht werden, indem die Breite von 0 % nach links auf 100 % geändert wird, wodurch der Zweck der Straffung des Codes erreicht wird, und vor dem Einfügen: hinzugefügt wird, um andere Vorgänge zu erleichtern.

Vollständiger Code

    

    

    





    <p id="underline"></p>

Das obige ist der detaillierte Inhalt vonCSS3, Pseudoelement zeigt ein Beispiel dafür, wie sich die Unterstreichung nach beiden Seiten ausdehnt, wenn die Maus hinein bewegt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!