Robię to HTML email podpisu inline CSS (tj CSS w style
atrybutach) i jestem ciekaw, czy to możliwe, aby wykorzystać :before
i :after
pseudo-elementy.
Jeśli tak, jak zaimplementowałbym coś takiego z wbudowanym CSS?
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
Odpowiedzi:
Nie możesz określić stylów wbudowanych dla pseudoelementów.
Dzieje się tak, ponieważ pseudoelementy, takie jak pseudoklasy (zobacz moją odpowiedź na to inne pytanie ), są zdefiniowane w CSS przy użyciu selektorów jako abstrakcji drzewa dokumentu, których nie można wyrazić w HTML. Z
style
drugiej strony atrybut wbudowany jest określony w HTML dla konkretnego elementu.Ponieważ style wbudowane mogą występować tylko w HTML, będą miały zastosowanie tylko do elementu HTML, w którym są zdefiniowane, a nie do wszystkich pseudoelementów, które generuje.
Nawiasem mówiąc, główna różnica między pseudoelementami a pseudoklasami w tym aspekcie polega na tym, że właściwości, które są dziedziczone domyślnie, będą dziedziczone przez element generujący
:before
iz:after
niego, podczas gdy style pseudoklas po prostu nie mają zastosowania. W twoim przypadku, na przykład, jeślitext-align: justify
umieścisz atrybut stylu wbudowanego dlatd
elementu, zostanie on odziedziczony przeztd:after
. Zastrzeżenie jest takie, że nie możesz deklarowaćtd:after
z atrybutem stylu wbudowanego; musisz to zrobić w arkuszu stylów.źródło
jak wspomniano powyżej: nie jest możliwe wywołanie wbudowanej pseudoklasy / elementu css. co teraz zrobiłem, to: nadanie Twojemu elementowi unikalnego identyfikatora, np. identyfikator lub unikatową klasę. i napisz
<style>
element pasującyfugly, ale jakiego css inline nie jest ..?
źródło
scoped
stylów i:root
psuedo klasy (to jest cool)<article><style scoped>:root:before { content: "*";}</style><!-- something --></article>
.:scope
pseudoklasy:<article><style scoped>:scope:before { content: "*";}</style><!-- something --></article>
scope
style d) i specyfikacji CSS (:scope
) . Powinienem być bardziej dokładny.Możesz użyć danych w tekście
źródło
data-content
atrybut jakcontent
pseudoelement. Nie ma to nic wspólnego z tworzeniem pseudoelementów za pomocą wbudowanego CSS.Nie, nie możesz kierować na pseudoklasy lub pseudoelementy w inline-css, jak powiedział David Thomas . Aby uzyskać więcej informacji zobacz tę odpowiedź za BoltClock o Pseudoklasy
Możemy również napisać use dla pseudoelementów
źródło
Nie możesz tworzyć pseudoelementów w inline css.
Jeśli jednak możesz utworzyć pseudoelement w arkuszu stylów, istnieje sposób, aby nadać mu styl w tekście, ustawiając styl wbudowany w element nadrzędny, a następnie używając słowa kluczowego inherit, aby nadać styl pseudoelementowi, na przykład:
czasami może się to przydać.
źródło
Tak, jest to możliwe , po prostu dodaj style w tekście do elementu, który dodajesz po lub przed, Przykład
źródło
::after
a::before
pseudoelementy wymagają tego, cocontent: value
jest domyślne,content:none
co w zasadzie nic nie daje.Jak wspomniano wcześniej, nie można używać elementów wbudowanych do stylizowania pseudoklas . Przed i po pseudoklasach są stany elementów, a nie rzeczywiste elementy. Możesz do tego użyć tylko JavaScript.
źródło
Jeśli masz kontrolę nad HTML, możesz dodać prawdziwy element zamiast pseudo. : before i: after Pseudoelementy są renderowane bezpośrednio po znaczniku open lub tuż przed znacznikiem close. Wbudowany odpowiednik tego css
Byłoby coś takiego:
Pamiętać; Twoje „prawdziwe” elementy przed i po oraz wszystko z wbudowanym css znacznie zwiększy rozmiar twoich stron i zignoruje optymalizacje ładowania strony, które umożliwiają zewnętrzne css i pseudoelementy.
źródło
możesz użyć
w css
źródło