Kernpunkte
:before Pseudo-Elemente in :after CSS können verwendet werden, um Seiteninhalt zu generieren, einschließlich Text, Bilder, Attributwerten und Zähler. Sie können auch verwendet werden, um komplexe Formen mit minimaler Markierung zu erzeugen. :first-line, :first-letter, :selection, :before, :after und Video Erklärung
(Laden im Player ...) Dieses Video ist Teil der ATOZ CSS -Serie. Hier finden Sie andere Inhalte in der Serie.Textdatensatz
Das CSS-Pseudoelement ist ein Element auf der Seite, das nicht im HTML-Code angezeigt wird.
Sie können mit jedem CSS -Stil betrieben werden, der auf jedes andere Element angewendet wird.
:before Zwei spezielle Pseudo-Elemente-:after und
In diesem Abschnitt werden wir lernen:
pseudo-element
Es gibt fünf Pseudoelemente in CSS:
:first-line :first-letter :selection :before :after Diese werden von Doppelkolons von Pseudoklassen unterschieden, aber zum Einfachheit halber werden sie normalerweise unter Verwendung von Einzelkolons in CSS geschrieben.
:first-line Hier ist ein langer Hinweis auf den Platzhaltertextblock. Ich kann die Farbe der ersten Zeile des Textes mit :first-letter ändern, die auch nach der Reform des Textes gilt. Ich kann einen anfänglichen Caps -Effekt erstellen, indem ich den Stil von :selection mit schwimmenden und größeren Schriftgrößen festlegt. Ich kann auch die Farbe des ausgewählten Textes mit
:before Ich kann die :after und content Pseudo-Elemente verwenden, um große Anführungszeichen vor und nach der Blockreferenz hinzuzufügen. Der Text wird aus dem Attribut
blockquote {
position: relative;
border-left: 5px solid #66d9ef;
padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
color: #cc3f85;
}
blockquote p:first-letter {
float: left;
font-size: 4em;
margin-right: 0.5em;
}
::selection {
background: #cc3f85;
color: #fff;
}
blockquote:before {
content: "“";
position: absolute;
top: 0;
left: -0.6em;
font-size: 8em;
font-family: Georgia;
}
blockquote:after {
content: "”";
bottom: -0.25em;
right: -0.5em;
line-height: 1rem;
}
blockquote:before,
blockquote:after {
position: absolute;
color: #66d9ef;
font-size: 8em;
font-family: Georgia;
}Inhalt erstellen
:before Verwenden von :after und
Wir haben gesehen, wie man der Seite Textinhalte hinzufügt, aber wir können auch Bilder, Attributwerte, Zähler oder leere Zeichenfolgen hinzufügen und einfach auf diese beiden zusätzlichen Elemente zugreifen. <🎜>
Hinzufügen eines Bildes ähnelt dem Hinzufügen eines Hintergrundbildes mit url(). Verwenden Sie hier url() als Wert des content -attributs. Ich bevorzuge tatsächlich Hintergrundbilder und greife auf das Pseudoelement zu, indem ich eine leere Zeichenfolge für content erstelle. Dies bietet mehr Kontrolle über das Bild, da alle häufig verwendeten Eigenschaften wie background-position, background-repeat und background-size verfügbar sind.
blockquote {
position: relative;
border-left: 5px solid #66d9ef;
padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
color: #cc3f85;
}
blockquote p:first-letter {
float: left;
font-size: 4em;
margin-right: 0.5em;
}
::selection {
background: #cc3f85;
color: #fff;
}
blockquote:before {
content: "“";
position: absolute;
top: 0;
left: -0.6em;
font-size: 8em;
font-family: Georgia;
}
blockquote:after {
content: "”";
bottom: -0.25em;
right: -0.5em;
line-height: 1rem;
}
blockquote:before,
blockquote:after {
position: absolute;
color: #66d9ef;
font-size: 8em;
font-family: Georgia;
} Sie können auch das Attribut content verwenden, um den Wert des HTML -Attributs in die Seite zu injizieren. Beim Erstellen eines Druckstylesheetes füge ich gerne das folgende Code -Snippet hinzu, um die URL des Links auszuführen, damit sie auf der Seite gelesen werden können:
li:before {
content: url(star.png);
display: inline-block;
vertical-align: middle;
margin-right: 0.5em;
}Dies fügt Links nach dem Link -Text für einen Link hinzu, der kein interner Link oder Hash -Link ist.
Der letzte Sonderfall der Generierung von Inhalten ist der Wert der Insertion -Zählervariable. Ich habe festgestellt, dass dies sehr nützlich ist, um komplexe Listen der rechtlichen Geschäftsbedingungen zu nummerieren.
Hier finden Sie eine Reihe von Titeln und unten eine Reihe von verschachtelten Listen. Ich möchte, dass jeder Kapitel -Titel eine Nummer hat und jedes Listenelement eine untergeordnete Nummer für jedes Kapitel ist.
Für jedes h2 werde ich einen "Abschnitt" -Tisch inkrementieren. Vor jedem Kapitel -Titel werde ich den Wert des Kapitelszählers ausgeben. Es können zusätzliche Zeichenfolgen zwischen den Zählern hinzugefügt werden, um komplexe Nummerierungssysteme zu erstellen. Die vereinfachte Form dieser Methode kann verwendet werden, um den Stil von Zahlen oder Kugeln in einer Liste zu steuern.
a[href]:not([href*="#"]):after {
content: attr(href);
}Form
Da jedes Element auf der Seite zwei "zusätzliche" Elemente haben kann und nach unseren Vorlieben gestylt werden kann, können verschiedene komplexe Formen erstellt werden.
Während ich über das Demo-Beispiel nachdachte, habe ich einen Hinweis auf die Form von CSS-Tricks gesehen. Lassen Sie uns Yin- und Yang -Symbole mit einem einzigen Element machen.
h2 {counter-increment: section;}
ul {counter-reset: item;}
li {counter-increment: item;}
h2:before {
content: counter(section) " - ";
}
li:before {
content: counter(section) "." counter(item);
} Beginnend mit der Box können Sie border-radius verwenden, um es in einen Kreis umzuwandeln. Zwei farbige Halbkreise können mit border-bottom erstellt werden, was gleich der Höhe des Kreises ist. Zwei Punkte werden erstellt, indem zwei Kreise mit Pseudoelementen erstellt und mit position:absolute platziert werden. Mit Grenzen, die der Halbkreisfarbe entsprechen, können Sie zwei kreisförmige Endpunkte des Symbols erstellen. Wenn Sie mich fragen, ist es cool.
Ich mag es, Pseudo-Elemente zu verwenden.
Häufig gestellte Fragen zu CSS-Pseudo-Elementen
CSS-Pseudoelement wird verwendet, um bestimmte Teile eines Elements zu stylen. Es gibt verschiedene Arten von Pseudoelementen, einschließlich ::before, ::after, ::first-letter, ::first-line, ::selection, ::backdrop, ::placeholder, ::before und ::after. Jedes Pseudoelement richtet sich an einen anderen Teil des Elements. Beispielsweise werden ::first-letter und ::first-line verwendet, um den Inhalt vor und nach dem Elementinhalt einzufügen, während
::before
::after Wie verwendet ich pseudo-Elemente? ::before
::after content und
blockquote {
position: relative;
border-left: 5px solid #66d9ef;
padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
color: #cc3f85;
}
blockquote p:first-letter {
float: left;
font-size: 4em;
margin-right: 0.5em;
}
::selection {
background: #cc3f85;
color: #fff;
}
blockquote:before {
content: "“";
position: absolute;
top: 0;
left: -0.6em;
font-size: 8em;
font-family: Georgia;
}
blockquote:after {
content: "”";
bottom: -0.25em;
right: -0.5em;
line-height: 1rem;
}
blockquote:before,
blockquote:after {
position: absolute;
color: #66d9ef;
font-size: 8em;
font-family: Georgia;
} Kann ich Pseudoelemente verwenden, um die Form der Form zu stylen? ::placeholder
li:before {
content: url(star.png);
display: inline-block;
vertical-align: middle;
margin-right: 0.5em;
} Wie kann man den ersten Buchstaben eines Absatzes mit Pseudo-Element stylen? ::first-letter
a[href]:not([href*="#"]):after {
content: attr(href);
} Kann ich mehrere Pseudoelemente für dasselbe Element verwenden? ::before
::after Ja, Sie können mehrere Pseudoelemente für dasselbe Element verwenden. Sie können beispielsweise ::before und ::after im selben Element verwenden, um Inhalte vor und nach dem Inhalt einzufügen. Es ist jedoch wichtig, sich daran zu erinnern, dass die Reihenfolge der Pseudoelemente ist.
Unterstützen alle Browser Pseudoelemente?
Was ist der Unterschied zwischen Pseudoelementen und Pseudoklasse?
Kann ich Pseudoelemente mit JavaScript verwenden?
<🎜> Pseudoelemente sind nicht Teil des DOM, daher können sie nicht mit JavaScript direkt zugegriffen oder manipuliert werden. Sie können jedoch den auf ein Pseudoelement angewendeten Stil ändern, indem Sie den Stil des übergeordneten Elements mit JavaScript ändern. <🎜>::selection Pseudo-Element verwenden? ::selection Pseudoelement wird verwendet, um das Erscheinungsbild des vom Benutzer ausgewählten Text zu ändern. Sie können beispielsweise die Hintergrundfarbe und Textfarbe des ausgewählten Textes ändern. Hier ist ein Beispiel:
blockquote {
position: relative;
border-left: 5px solid #66d9ef;
padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
color: #cc3f85;
}
blockquote p:first-letter {
float: left;
font-size: 4em;
margin-right: 0.5em;
}
::selection {
background: #cc3f85;
color: #fff;
}
blockquote:before {
content: "“";
position: absolute;
top: 0;
left: -0.6em;
font-size: 8em;
font-family: Georgia;
}
blockquote:after {
content: "”";
bottom: -0.25em;
right: -0.5em;
line-height: 1rem;
}
blockquote:before,
blockquote:after {
position: absolute;
color: #66d9ef;
font-size: 8em;
font-family: Georgia;
} Ja, Sie können Pseudoelemente mithilfe von CSS-Animationen oder -übergängen animieren. Denken Sie jedoch daran, dass nicht alle Eigenschaften animiert werden können. Zum Beispiel können Sie die Deckkraft oder Transformation eines Pseudoelements animieren, aber Sie können das content -attribut nicht animieren.
Das obige ist der detaillierte Inhalt vonATOZ CSS Screencast: CSS -Pseudoelemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Ist es legal, Bitcoin auf Huobi.com zu kaufen und zu verkaufen?
So überprüfen Sie den Download-Verlauf auf TikTok
Kernelpanic-Lösung
Konfigurieren Sie die Java-Laufzeitumgebung
regulärer Perl-Ausdruck
So lösen Sie Probleme beim Parsen von Paketen
So beheben Sie einen Skriptfehler
So funktioniert der TCP-Drei-Wege-Handshake
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
