Einführung in drei Verwendungen von CSS-Pseudoelementen::before und ::after (Codebeispiele)

In diesem Artikel werden drei Verwendungen von Pseudoelementen ::before und ::after in CSS vorgestellt. Freunde in Not können darauf verweisen.

Für die ::before- und ::after-Pseudoelemente wurde ein gutes Element mit dem :after-Pseudoelement in CSS im vorherigen Artikel Overlay erstellt Wirkung. Aber abgesehen davon haben sie noch viele andere Verwendungsmöglichkeiten. In diesem Artikel stellen wir Ihnen drei weitere Verwendungsmöglichkeiten von ::before und ::after vor.

Lassen Sie uns zunächst einen kurzen Blick auf die Funktionsweise von Pseudoelementen werfen.

Hinweise zur Verwendung von ::after und ::before

Der Browser rendert diese Elemente als „generierten Inhalt“. Der Wert kann auf eine leere Zeichenfolge gesetzt werden: Inhalt: "";.

Wenn der Browser dieses Element in das DOM einfügt, fügt er es in das für den Selektor verwendete Element ein. Dies ist die Definition aus der Spezifikation:

::before stellt ein stylebares untergeordnetes Pseudoelement vor dem tatsächlichen Inhalt des Originalelements dar.

::after unmittelbar nach dem tatsächlichen Inhalt des Originalelements Stellt ein stylebares untergeordnetes Pseudoelement dar.

Standardmäßig ist dieses neue Element ein Inline-Element. Sobald ein Element in das DOM eingefügt wird, kann es wie jedes andere Element geändert werden. Dies gibt uns viel Kontrolle über die Auswahl.

Wichtiger Hinweis: Nicht alle Browser-/Screenreader-Kombinationen können den Inhalt lesen, den Sie im Inhalts-Pseudoelement platzieren. Dies sollte nur für Textelemente verwendet werden. Echter Inhalt sollte immer zum Markup der Seite hinzugefügt werden.

Symbole neben bestimmten Arten von Links hinzufügen

Wenn Sie dem Benutzer mehr visuelle Informationen über den Link geben möchten, können Sie stattdessen mit ::after ein Symbol hinzufügen Es werden keine Tags hinzugefügt.

Fügen Sie das Symbol „Externer Link“ zu Links hinzu, die keine absoluten Links sind.

a[href^="http"]::after {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/161359/open-in-new.svg);
    background-size: contain;
    content:"";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

In diesem Code finden wir unter der Annahme, dass interne Links als relative Pfade geschrieben sind, jedes Ankertag, das ein href-Element hat, das mit http beginnt.

Ein weiteres gutes Beispiel für diese Methode ist PDF

a[href$=".pdf"]::after {
    content: " (pdf)";
    font-size:  .8em;
    color: tomato;
}

Für jede href, die mit .pdf endet, können wir die Zeichenfolge „(pdf)“ anhängen. Dieses ::after-Element ist besser als Bilder einfacher zu steuern, da wir über vollständige CSS-Steuerelemente zum Anpassen von Schriftgröße, Farbe und anderen Effekten verfügen.

Weitere Informationen zu diesen Selektoren finden Sie im CSS-Online-Handbuch auf der chinesischen PHP-Website.

Fügen Sie interessante „Rahmen“ zu Containern hinzu

Bevor die Houdini Paint API für alle Browser verfügbar ist, werden Sie Ihre Elemente möglicherweise sehr langweilig finden. Aber mit einfachem CSS und ::before und ::after können Sie in allen Browsern noch einige weitere interessante Effekte erzielen.

.related-article {  
    padding: 20px;
    position: relative;
    background-image: linear-gradient(120deg,#eaee44,#33d0ff);
}
.related-article * {
    position: relative; // Set stacking context to keep content on top of the background
}
.related-article::before {
    content: "";
    background-color: #fff;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

In diesem Beispiel wenden wir einen Hintergrundverlauf auf das übergeordnete Element an und verwenden ein ::before-Element, um das Innere mit einer einfachen Hintergrundfarbe zu „beschneiden“. Dadurch entsteht der Eindruck eines Randes, obwohl es sich um zwei Rechtecke handelt. Um die Abmessungen passend zum Rand zu ermitteln, bedarf es lediglich einiger einfacher Berechnungen.

Indem wir ein Pseudoelement als absoluten Wert positionieren, können wir seine Position steuern. Sass vereinfacht mathematische Operationen mit Variablen und mathematischen Funktionen.

Was wäre, wenn wir statt eines vollständigen Rahmens möchten, dass unsere Kopfzeilen schicke kleine Ränder darunter haben?

Um dies zu erreichen, können wir das Element ::after verwenden.

.cool-border::after {
    content: "";
    display: block;
    height: 7px;
    background-image: linear-gradient(120deg, #e5ea15, #00c4ff);
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    width: 45%;
    transform: translateX(-50%) skew(-50deg);}.cool-border {
    position: relative;
}

In diesem Beispiel platzieren wir das Pseudoelement auch an einer absoluten Position. Die Größe unseres „Rahmens“ hängt von der Höhe des neuen Elements ab. Wenn es sich um einen rechten oder linken „Rand“ handelt, können Sie die Elementbreite zur Bestimmung der Größe verwenden.

Da es sich nur um ein Element auf der Seite handelt, können wir auch die Ränder anpassen.

Stilelemente hinzufügen, die keine Stil-Tags erfordern

b8a712a75cab9a5aded02f74998372b4 ist ein gutes semantisches Element. Lassen Sie uns es nicht mit zusätzlichem Markup ruinieren.

In vielen ::after-Beispielen (einschließlich anderer in diesem Artikel) können Sie das Pseudoelement position: absolute sehen, und natürlich gibt es keine Regel, die besagt, dass dies der Fall sein muss.

Verwenden wir ::before und ::after als Rasterelemente, um Anführungszeichen auf einem b8a712a75cab9a5aded02f74998372b4 zu platzieren.

Indem wir alles explizit im Raster platzieren, müssen wir uns keine Gedanken über zusätzliche Wrapper machen. Wir können Anführungszeichen auch als Hintergrundbilder verwenden und ihnen eine Min-Max-Skalierung in unserer einfachen Funktion „grid-template-columns“ ermöglichen.

Endlich

Tatsächlich gibt es viele Verwendungsmöglichkeiten für die CSS-Pseudoelemente::after und ::before, und jeder sollte sie auch in praktischen Anwendungen verwenden. Es gibt bessere. Hinterlassen Sie gerne eine Nachricht, um die Verwendung zu besprechen.

Das obige ist der detaillierte Inhalt vonEinführung in drei Verwendungen von CSS-Pseudoelementen::before und ::after (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!