Présentation d'un code d'effet spécial qui utilise CSS3 et des pseudo-éléments pour étendre le soulignement des deux côtés lorsque la souris est déplacée.

Cet article présente principalement les informations pertinentes sur l'utilisation des pseudo-éléments CSS3+ pour obtenir l'effet de soulignement étendu des deux côtés lorsque la souris est déplacée. L'article le présente d'abord en détail pour faciliter la compréhension de chacun, puis fournit un aperçu complet exemple de code auquel tout le monde peut se référer. Étudiez, si vous en avez besoin, venez étudier ensemble.

Jetons d'abord un coup d'œil aux rendus :

Idée d'implémentation :

Positionnez les pseudo-éléments :before et :after au milieu du bas de l'élément, et définissez la largeur de 0 à 100 % pour obtenir l'objectif but.

Méthode d'implémentation :

1. Définissez d'abord un élément de bloc (les éléments en ligne n'ont ni largeur ni hauteur) et modifiez le style en arrière-plan. couleur du rectangle gris clair, définissez le positionnement relatif.

code html

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

style CSS

#underline{

    width: 200px;

    height: 50px;

    background: #ddd;

    margin: 20px;

    position: relative;

}

2 Définissez deux pseudo-éléments : avant et :après, et définissez leur couleur d'arrière-plan sur bleu (c'est-à-dire. , la couleur du soulignement), utilisez le positionnement absolu pour fixer les deux éléments à la position médiane inférieure de #underline.

style CSS

#underline:before,

#underline:after{

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

    width: 0;

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

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

    position: absolute;

    top: 100%;

    left: 50%;

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

}

3. Définissez l'effet de déplacement de la souris.

Style CSS

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

    left:0%; 

    width:50%;

}

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

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

    width: 50%;

}

Optimisation

1 Bien que l'objectif ait été atteint, deux pseudo éléments ont été utilisés , l'un s'étend vers la gauche de 50 % et l'autre s'étend vers la droite de 50 %. Un seul peut-il s'étendre jusqu'à 100 % pour atteindre l'objectif ?

code css

#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. Définissez uniquement le pseudo-élément :after, et changez-le de 50% vers la gauche avec une largeur de 0 à 0% à partir du gauche avec une largeur de 100 % peut être obtenu, atteignant ainsi l'objectif de rationalisation du code, et il y a un supplément :before pour faciliter d'autres opérations.

Code complet

    

    

    






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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!