Vertiefendes Verständnis der CSS-Pseudoelemente: before und :after (mit Beispielen)

Cascading Style Sheets (CSS) werden hauptsächlich zum Anwenden von Stilen auf HTML-Tags verwendet. In einigen Fällen, in denen das Hinzufügen zusätzlicher Tags zum Dokument überflüssig oder unmöglich ist, gibt es in CSS tatsächlich eine Funktion, die es uns ermöglicht, zusätzliches Markup ohne hinzuzufügen Unterbrechen der eigentlichen Datei, d. h. Pseudoelement.

Ich bin mir sicher, dass Sie von diesem Begriff gehört haben, insbesondere wenn Sie einige Kurse belegt haben. (Empfohlener Kurs: CSS-Video-Tutorial)

Es gibt tatsächlich mehrere CSS-Pseudoelemente, die klassifiziert werden, wie zum Beispiel :first-line, :first-letter, ::selection, :before und :nachher. In diesem Artikel beschränken wir uns jedoch darauf, über :before und :after zu sprechen, und „Pseudoelemente“ beziehen sich hier speziell auf sie. Wir beginnen mit den Grundlagen, um die CSS-Pseudoelemente: before und :after eingehend zu verstehen .

Syntax und Browserunterstützung für CSS-Pseudoelemente

:before- und :after-Pseudoelemente gab es tatsächlich in CSS1, aber was wir hier besprechen, wird in CSS2 veröffentlicht .1's :before und :after. Anfangs verwendeten Pseudoelemente eine Ein-Doppelpunkt-Syntax, aber als sich das Web weiterentwickelte, wurden CSS3-Pseudoelemente so geändert, dass sie Doppelpunkte wie ::before und ::after verwenden – was sie von Pseudoklassen (z. B. :hover) unterscheidet , :aktiv usw.).

Unabhängig davon, ob Sie das Einzel- oder Doppelpunktformat verwenden, wird der Browser es trotzdem erkennen. Und da Internet Explorer 8 nur das Single-Colon-Format unterstützt, ist es sicherer, das Single-Colon-Format zu verwenden, wenn Sie eine größere Browserkompatibilität wünschen.

Welche Funktion haben CSS-Pseudoelemente?

Kurz gesagt, ein Pseudoelement fügt ein zusätzliches Element vor oder nach dem Inhaltselement ein. Wenn wir also beide hinzufügen, sind sie technisch gleich, mit dem folgenden Markup.

<p>
<span>:before</span> 
  This the main content. 
<span>:after</span>
</p>

Diese Elemente werden jedoch nicht tatsächlich im Dokument generiert. Sie sind weiterhin an der Oberfläche sichtbar, werden jedoch nicht in der Dokumentquelle gefunden, es handelt sich also praktisch um Pseudoelemente.

Verwendung von Pseudoelementen

Die Verwendung von Pseudoelementen ist relativ einfach; der folgende Syntaxselektor:before fügt ein Element vor dem Selektor des Inhalts hinzu, während dieser Syntaxselektor :after wird danach hinzugefügt und um Inhalte darin hinzuzufügen, können wir das Inhaltsattribut verwenden.

Beispielsweise fügt das folgende Snippet Anführungszeichen vor und nach Blockquote hinzu.

blockquote:before {
  content: open-quote;
}
blockquote:after {
  content: close-quote;
}

Pseudoelemente im Stil

Obwohl ein Pseudoelement ein Pseudoelement ist, verhält sich ein Pseudoelement tatsächlich wie ein „echtes“ Element, das wir hinzufügen können Sie können ihnen jeden Stil hinzufügen, z. B. Farben ändern, Hintergründe hinzufügen, die Körpergröße anpassen, den Text darin ausrichten und mehr.

blockquote:before {
  content: open-quote;  
  font-size: 24pt;  
  text-align: center;  
  line-height: 42px;  
  color: #fff;  
  background: #ddd;  
  float: left;  
  position: relative;  
  top: 30px; 
  }
blockquote:after {
  content: close-quote;  
  font-size: 24pt;  
  text-align: center;  
  line-height: 42px;  
  color: #fff;  
  background: #ddd;  
  float: right;  
  position: relative;  
  bottom: 40px;
  }

CSS-Pseudoelement gibt Abmessungen an

Standardmäßig sind die generierten Elemente Elemente auf Inline-Ebene. Wenn wir also Höhe und Breite angeben möchten, Wir müssen es zunächst mit der display:block-Deklaration als Blockelement definieren.

blockquote:before {
  content: open-quote;
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  background: #ddd;
  float: left;
  position: relative;
  top: 30px;
  border-radius: 25px;
 
  /** define it as a block element **/
  display: block;
  height: 25px;
  width: 25px;
}
blockquote:after {
  content: close-quote;
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  background: #ddd;
  float: right;
  position: relative;
  bottom: 40px;
  border-radius: 25px;
 
  /** define it as a block element **/
  display: block;
  height: 25px;
  width: 25px;
}

Hintergrundbild anhängen

Wir können den Inhalt auch durch ein Bild anstelle von reinem Text ersetzen. Während das Inhaltsattribut eine URL()-Zeichenfolge bereitstellt, in die das Bild eingefügt wird, bevorzuge ich in den meisten Fällen die Verwendung des Hintergrundattributs, um mehr Kontrolle über das angehängte Bild zu haben.

blockquote:before {
  content: " ";
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  float: left;
  position: relative;
  top: 30px;
  border-radius: 25px;
  background: url(images/quotationmark.png) -3px -3px #ddd;
  display: block;
  height: 25px;
  width: 25px;
}
blockquote:after {
  content: " ";
  font-size: 24pt;
  text-align: center;
  line-height: 42px;
  color: #fff;
  float: right;
  position: relative;
  bottom: 40px;
  border-radius: 25px;
  background: url(images/quotationmark.png) -1px -32px #ddd;
  display: block;
  height: 25px;
  width: 25px;
}

Wie Sie jedoch dem obigen Codeausschnitt entnehmen können, deklarieren wir ihn dennoch, auch wenn der Inhalt im Inhaltsattribut eine leere Zeichenfolge ist. Der Inhalt stellt eine Anforderung dar und sollte immer vorhanden sein. Andernfalls funktioniert das Pseudoelement nicht ordnungsgemäß.

Pseudoklassen kombinieren

Obwohl Pseudoklassen und Pseudoelemente unterschiedlich sind, können wir beispielsweise Pseudoklassen mit Pseudoelementen in einer CSS-Regel verwenden , wenn wir den Hintergrund des Zitats etwas abdunkeln, lautet der Code für Blockquote, der sich ändert, wenn wir mit der Maus darüber fahren, wie folgt.

blockquote:hover:after, blockquote:hover:before {
  background-color: #555;
}

Übergangseffekte hinzufügen

Wir können sogar das Übergangsattribut auf sie anwenden, um einige gut aussehende Übergangseffekte zu erstellen.

transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;

Aber leider scheint der Konvertierungseffekt nur für die neueste Version von Firefox zu gelten. Hoffentlich werden in Zukunft weitere Browser aufholen und die Anwendung von Pseudoelementen innerhalb von Übergangsattributen zulassen.

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis der CSS-Pseudoelemente: before und :after (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!