Explication détaillée de CSS3 et des pseudo-éléments pour permettre au soulignement de s'étendre des deux côtés lorsque la souris est déplacée

Cet article présente principalement les informations pertinentes sur l'utilisation de 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 donne d'abord une introduction détaillée 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 et apprendre. Amis qui en ont besoin, venez étudier ensemble. J'espère que ça aide.

Regardons d'abord les rendus :

Idée d'implémentation :

Placer les pseudo-éléments : avant et : After est positionné au milieu du bas de l'élément et définit la largeur de 0 à 100 % pour atteindre l'objectif.

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 un rectangle avec une couleur de fond gris clair, puis 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, un s'étendant à 50 % vers la gauche et un s'étendant vers la gauche. c'est vrai 50 %, une seule extension à 100 % peut-elle 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 d'une largeur de 50% de la gauche à une largeur de 0 à un une largeur de 0% à partir de la gauche. % peut être obtenue, atteignant ainsi l'objectif de rationaliser le code, et il y a un supplément :before pour faciliter d'autres opérations.

Code complet

    

    

    





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

Recommandations associées :

JavaScript implémente l'effet de mouvement d'entrée et de sortie de la souris similaire à Lagou.com

Code JS pur pour obtenir un changement de couleur entrelacé, un mouvement de souris vers l'intérieur et une surbrillance

Comment utiliser un tableau javascript pour changer la couleur sur des lignes alternées et ajouter un mouvement d'entrée et de sortie de la souris et cliquez sur les compétences effect_javascript

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!