Reines CSS, um nach Auswahl des Produkts das Zeichen √ in der unteren rechten Ecke anzuzeigen

Empfohlene Artikel:

Klicken Sie auf die untere rechte Ecke der CSS-Pseudoklasse, um ein Häkchen anzuzeigen, das die Auswahl anzeigt. Beispielcode : https://www.jb51.net/css/731762.html

Wirkung

Analyse:

1. Verwenden Sie Pseudoelement-Selektoren, um Inhalt hinzuzufügen.
2. Verwenden Sie einen breiteren Rand, um den Hintergrundeffekt des √-Zeichens zu erzielen
3. Verwenden Sie einen transparenten Rand, um zusätzliche Hintergrundfarbe zu entfernen.
4. Verwenden Sie die Zi Jue Fu Xiang-Positionierung, um das Zeichen √ an der entsprechenden Position zu platzieren.

CSS Code:

 &.ausgewählt{
              Farbe: @theme;
              Rand: 0,02rem durchgezogen @theme;
              Position: relativ;
              Übergang: alle 0,5 s mühelos;
            }
            &.ausgewählt::nach {
              Inhalt: „✔“;
              Anzeige: Block;
              Höhe: 0px;
              Breite: 0px;
              Position: absolut;
              unten: 0;
              rechts: 0;
              Farbe: #fff;
              /**Häkchengröße*/
              Schriftgröße: 10px;
              Zeilenhöhe: 8px;
              Rand: 10px durchgezogen;
              Rahmenfarbe: transparent #4884ff #4884ff transparent;
            }

Zusammenfassen

Dies ist das Ende dieses Artikels darüber, wie man mit reinem CSS ein √-Zeichen in der unteren rechten Ecke anzeigt, nachdem man ein Produkt ausgewählt hat. Weitere verwandte CSS-Inhalte zum Anzeigen eines √-Zeichens in der unteren rechten Ecke eines ausgewählten Produkts finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder stöbern Sie weiter unten in den verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!