Detaillierte Erläuterung der Verwendung der Pseudoelemente::before und ::after in CSS3

Vorher- und Nachher-Elemente sind eigentlich Pseudo-Elemente, die vor und nach den Elementen angehängt sind. Mit der Aussage, dass es sich um Pseudo-Elemente handelt, bedeutet dies, dass die Elemente nicht im DOM generiert werden, sondern beim Rendern von CSS durch die Browser-Rendering-Engine gezeichnet werden Dieser Artikel führt Sie hauptsächlich in die Verwendung der Pseudoelemente ::before und ::after in CSS3 ein. Freunde, die es benötigen, können darauf verweisen.

Vorwort

Wie wir alle wissen, sind die beiden Pseudoelemente::before und ::after in CSS3 tatsächlich Inhalt, aber in Tatsache ist, dass es in CSS2 diese beiden bereits gibt, aber in CSS2 werden sie durch einen Doppelpunkt davor dargestellt (:before und :after). Heute werde ich hauptsächlich darüber sprechen, wie man diese beiden Pseudoelemente verwendet.

1. Sie können Stile wie gewöhnliche Elemente hinzufügen

Zum Beispiel, wenn ich ein Symbol vor dem hinzufügen möchte Text, wenn ich beim Schreiben gewöhnliche Elemente verwende, kann ich so schreiben:

/*CSS*/
.del{ font-size: 20px;}
.del i{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; 
        background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}

/*HTML*/
<p class="del"><i></i><span>删除</span></p>

Aber es fühlt sich immer an Es ist unangenehm, ein leeres I-Tag anzubringen. Entfernen Sie es einfach!

/*CSS*/
.del{ font-size: 20px;}
.del::before{ content: ""; display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; 
        background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}

/*HTML*/
<p class="del"><span>删除</span></p>

Hier wird das Pseudoelement ::before direkt verwendet, um das leere i-Tag zu ersetzen zwei haben den gleichen Effekt. :

Außerdem können wir das ::after-Pseudoelement verwenden, um das klassische Problem des Löschens von Floats zu lösen:

.clearfix::after{ display: block; clear:both; overflow:hidden; Natürlich, wenn Ihre Website noch mit IE8 kompatibel sein muss :after, ::after ist nicht kompatibel.

2. Text in Elemente einfügen

Manchmal muss ich den gleichen Text gleichzeitig in viele Elemente einfügen, dann können Sie das tun Erwägen Sie die Verwendung dieser beiden Pseudoelemente. Zum Beispiel:

/*CSS*/
.up:after{ content: '↑'; color: #f00;}
.down:after{ content: '↓'; color: #0f0;}

/*HTML*/
<p class="up">上升</p>
<p class="down">下降</p>

Die Wirkung ist wie folgt:

3. Bilder in Elemente einfügen

Um einen Bild-plus-Text-Effekt ähnlich dem ersten Beispiel in diesem Artikel zu erzielen, können Sie auch Pseudoelemente verwenden Um Bilder direkt einzufügen, ohne dass Sie ein Hintergrundbild verwenden müssen, wie folgt:

/*CSS*/
.del{ font-size: 20px;}
.del::before{ content: url("imgs/delete.png"); display: inline-block; margin-right: 2px; vertical-align: middle; }
.del span{ vertical-align: middle;}

Es ist jedoch wichtig zu beachten, dass das auf diese Weise eingefügte Bild nicht möglich ist gesteuert durch die Größe des Pseudoelements. Um die Größe des Bildes zu ändern, können Sie nur ein Bild mit fester Größe einfügen (das ist etwas schwierig ...), daher halte ich es persönlich für besser, ein praktisches Hintergrundbild zu verwenden .

4. Fügen Sie fortlaufende Projektnummern ein

Vielleicht werden Sie sagen, ist es nicht einfach, fortlaufende Projektnummern hinzuzufügen? Nutzen Sie einfach direkt die bestellte Liste!

Ja, das ist tatsächlich möglich, einfach so:

<p>我的爱好：</p>
<ol>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ol>

Das ist der Effekt unter Chrome:

Es sieht gut aus und es gibt kein Problem. Was ist, wenn ich die vorherige Seriennummer fett formatieren möchte? Ich war verwirrt...

Zu diesem Zeitpunkt, sagten Sie, kann ich nicht einfach vor jedem Text manuell Beschriftungen und Zahlen hinzufügen und dann den Beschriftungen Stile hinzufügen?

/*CSS*/
ul li{ list-style: none;}
ul li span{ font-weight: bold;}

/*HTML*/
<p>我的爱好：</p>
<ul>
    <li><span>1.</span>吃饭</li>
    <li><span>2.</span>睡觉</li>
    <li><span>3.</span>打豆豆</li>
</ul>

Ja, es ist jetzt dreihundert. Was ist, wenn es dreißig oder dreihundert ist? Fügen Sie sie einzeln hinzu? (Sehr albern und naiv...)

Wenn Sie derzeit reines CSS verwenden, müssen Sie Pseudoelemente verwenden:

/*CSS*/
ul li{ list-style: none; counter-increment: number;}   //number相当于是个变量，随便取名就好，在伪元素中调用
ul li::before{ content: counter(number)"."; font-weight: bold;}  //注意这里不同于JS，counter(number)与"."之间不需要加任何东西，直接连接就好

/*HTML*/
<p>我的爱好：</p>
<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>

Der Effekt ist wie folgt:

Wenn ich also keine arabischen Ziffern möchte, kann ich stattdessen chinesische Ziffern verwenden?

Ja! Pseudoelemente sind schön und mächtig!

ul li{ list-style: none; counter-increment: number;}  
ul li::before{ content: counter(number,cjk-ideographic)"、"; font-weight: bold;}

Der Effekt ist wie folgt:

Zusätzlich zu dieser CJK-Ideografie können Sie auch Verwenden Sie mehr CSS-Attribute vom Typ „Listenstil“: (Fügen Sie die Tabelle direkt in w3cshool ein)

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der Pseudoelemente::before und ::after in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!