Reines CSS, um eine horizontale Linienanimation unter dem Element (Hintergrundbild) zu erreichen

Effektbild:

html:

<div class='site_bar'>Startseite</div>
CSS:
.site_bar{
  Hintergrundbild: linearer Farbverlauf (rot, rot);
  Hintergrundposition: unten in der Mitte;
  Hintergrundgröße: 0 2px;
  background-repeat: no-repeat; //Dieses Attribut darf nicht fehlen.
  Übergang: 0,3 s;
}
.site_bar:hover{
  Hintergrundgröße: 100 % 2px;
}

Zusammenfassen

Das Obige ist die reine CSS-Implementierung der horizontalen Linienanimation (Hintergrundbild) unter dem vom Editor eingeführten Element. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!