Tutorial zur Verwendung der Pseudoelemente::before und ::after

Die beiden Pseudoelemente

::before und ::after sind in CSS3 tatsächlich Inhalt, in CSS2 sind sie jedoch bereits vorhanden, in CSS2 werden sie jedoch 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.

Wenn ich beispielsweise ein Symbol vor dem Text hinzufügen möchte und ihn mit gewöhnlichen Elementen schreibe, kann ich schreiben Es sieht so aus:

/*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*/
<div class="del"><i></i><span>删除</span></div>

Aber es fühlt sich immer unangenehm an, ein leeres I-Tag zu hinterlassen, also entferne 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*/
<div class="del"><span>删除</span></div>

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

Ähnlich verwendet In diesem Zusammenhang können wir das Pseudoelement ::after verwenden, um das klassische Problem des Löschens von Floats zu lösen:

.clearfix::after{ display:block; clear:both; content:""; overflow:hidden; height:0; }

Natürlich, wenn Ihre Website weiterhin mit IE8 kompatibel sein muss , dann verwenden Sie :after, da ::after nicht kompatibel ist.

2. Text in Elemente einfügen

Manchmal muss ich möglicherweise den gleichen Text zu vielen Elementen gleichzeitig hinzufügen, daher können Sie die Verwendung dieser beiden Pseudoelemente in Betracht ziehen. Zum Beispiel:

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

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

Der Effekt ist wie folgt:

3. Fügen Sie ein Bild in das Element

ein um etwas Ähnliches wie in diesem Artikel zu erreichen. In einem Beispiel für das Hinzufügen von Texteffekten zu Bildern können Sie Pseudoelemente auch verwenden, um Bilder direkt einzufügen, ohne ein Hintergrundbild zu verwenden, 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;}

Aber Es ist wichtig zu beachten, dass beim Einfügen auf diese Weise die Größe des Bildes nicht durch Steuern der Größe des Pseudoelements geändert werden kann. Es kann nur ein Bild mit fester Größe eingeführt werden (das ist etwas verwirrend ...). Ich persönlich denke, dass es besser ist, ein ehrliches und 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, so:

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

Das ist der Effekt unter Chrome:

Es sieht gut aus, 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, jetzt sind es drei. Was ist, wenn es dreißig oder dreihundert sind? 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, sondern chinesische Ziffern verwenden möchte, ist das in Ordnung?

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 dazu cjk-ideographic können Sie auch weitere Listenstilattribute verwenden CSS: (Formular direkt in w3cshool einfügen)

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung der Pseudoelemente::before und ::after. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!