Kann Inline-CSS ::before- und ::after-Pseudoelemente verwenden?

Anfrage, ob Inline-CSS die Bereitstellung von ::before zulässt und ::after Pseudoelemente ist eine gültige Frage. Dieser Artikel befasst sich mit den Besonderheiten der Beantwortung dieser Abfrage.

Inline-CSS und Pseudoelemente

Inline-CSS, das sich direkt in HTML-Elementen befindet, bietet eine Alternative zu definiertem CSS in einem externen Stylesheet. Während Inline-CSS seinen Zweck erfüllt, ergibt sich bei der Betrachtung von Pseudoelementen eine Einschränkung.

Pseudoelemente :before und :after sind integrale Merkmale von CSS und erleichtern das Einfügen von Inhalten vor oder nach einem bestimmten Element. Diese Pseudoelemente erfordern jedoch Stylesheet-Deklarationen, da Inline-CSS nicht direkt auf sie abzielen kann.

Pseudoelemente mit Stylesheets implementieren

Um die Implementierung von ::before zu veranschaulichen und ::after mit Stylesheets, siehe folgendes Beispiel:

td { 
    text-align: justify;
}
td::after { 
    content: "";
    display: inline-block;
    width: 100%;
}

In diesem Beispiel sorgt die Inline-CSS-Eigenschaft text-align: justify dafür, dass der Text innerhalb des td-Elements ausgerichtet wird. Gleichzeitig fügt das im Stylesheet definierte Pseudoelement ::after einen leeren String ein und nutzt dabei einen Inline-Block, der sich über die Breite des td-Elements erstreckt.