CSS3, pseudo-élément montre un exemple de la façon dont le soulignement s'étend 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. Paramètres : Before et :after sont deux pseudo-éléments, définissez leur couleur d'arrière-plan sur bleu (c'est-à-dire la couleur du soulignement) et 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. est atteint Oui, mais en utilisant deux pseudo-éléments, un s'étendant à 50 % vers la gauche et un s'étendant à 50 % vers la droite, l'objectif peut-il être atteint en n'en utilisant qu'un seul pour s'étendre à 100 % ?

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 déplacez-le de 50% depuis la gauche avec un largeur de 0 Ceci peut être obtenu en changeant la distance de 0% à la largeur gauche à 100%, atteignant ainsi l'objectif de rationaliser le code et en ajoutant : avant 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!