Tworzę podpis e-mail w formacie HTML z wbudowanym CSS (tj. CSS w atrybutach style) i jestem ciekawy, czy możliwe jest użycie pseudoelementów :before i :after.Używanie CSS: przed i: po pseudoelementach z wbudowanym CSS?
Jeśli tak, w jaki sposób zaimplementować coś takiego z wbudowanym CSS?
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
No nie można kierować pseudo-classes lub pseudo-elements w inline css jak David Thomas powiedział. Aby uzyskać więcej informacji zobacz this odpowiedź przez BoltClock około Pseudoklasy
opiniach Styl atrybut definiuje tylko właściwości stylu dla danego elementu HTML. Pseudo-klasy są członkiem rodziny selektorów, , które nie występują w atrybucie .....
Możemy również napisać użyć same dla pseudo-elementów
Nie. Atrybut stylu definiuje tylko właściwości stylu dla danego elementu HTML . Pseudoklasy i pseudoelementy są członkami rodziny selektorów, które nie występują w atrybucie, więc nie możesz ich stylować inline.
Nie można określać stylów wstawianych dla pseudoelementów.
Dzieje się tak dlatego, że pseudoelementy, takie jak pseudoklasy (patrz moja odpowiedź na this other question), są zdefiniowane w CSS przy użyciu selektorów jako abstrakcji drzewa dokumentu, którego nie można wyrazić w HTML. Z kolei atrybut inline style jest określony w kodzie HTML dla określonego elementu.
Ponieważ style inline może nastąpić tylko w HTML, będą one miały zastosowanie tylko do elementu HTML, które zostały zdefiniowane na, a nie do żadnych pseudo-elementów generuje.
Tak na marginesie, główną różnicą pomiędzy pseudo-elementów i pseudo-klas w tym aspekcie jest to, że właściwości, które są dziedziczone domyślnie will be inherited przez :before i :after od elementu wytwarzającego, natomiast style Pseudo-klasa po prostu nie mają zastosowania w ogóle. W twoim przypadku, na przykład, jeśli umieścisz text-align: justify w atrybucie stylu wstawianego dla elementu td, zostanie on odziedziczony przez td:after. Ograniczeniem jest to, że nie można zadeklarować td:after z atrybutem stylu inline; musisz to zrobić w arkuszu stylów.
jak wspomniano powyżej: to nie jest możliwe wywołanie Css pseudo klasa/-elementowe rolkach. co teraz zrobiłem, to: nadaj elementowi unikalny identyfikator, np. identyfikator lub unikalna klasa. i napisać montażu <style> elementu
<style>#id29:before { content: "*";}</style>
<article id="id29">
<!-- something -->
</article>
fugly, ale co inline css isnt ..?
to nie jest wbudowany styl CSS. Wewnętrzny CSS wymaga, aby atrybut style = "" był przekazywany do poszczególnych elementów HTML. Powszechnie wymagane do wysyłania CSS sformatowanych do Gmaila, który usuwa wszystko w tagach '. –
Korekta: Użyj pseudo-klasy ': scope': ' –
można wykorzystywać dane w inline
<style>
td { text-align: justify; }
td:after { content: attr(data-content); display: inline-block; width: 100%; }
</style>
<table><tr><td data-content="post"></td></tr></table>
To drukuje atrybut 'data-content' jako' content' dla pseudoelementu. Nie ma nic wspólnego z tworzeniem pseudoelementów z wbudowanym CSS. –
Przyszedłem tutaj, szukając sposobu zastosowania pseudo selektorów w wewnętrznym CSS, a ta odpowiedź pokazała mi inny sposób osiągnięcia tego samego. Treść musiała być oparta na dużej liczbie możliwych opcji tworzonych dynamicznie, więc nie było praktyczne pisanie sterty oddzielnych selektorów CSS dla każdego możliwego wyniku. – wunth
To naprawdę jest bardzo dobra odpowiedź dla kogoś, kto chce dodać zawartość dynamiczną do treści dodatkowej. Być może nie jest to związane z tym problemem, ale to pytanie jest wyświetlane podczas wyszukiwania tego rozwiązania za pośrednictwem Google. – Aleks
Tak to możliwe, wystarczy dodać style inline dla elementu którego dodanie przed lub po, przykład
<style>
.horizontalProgress:after { width: 45%; }
</style><!-- Change Value from Here -->
<div class="horizontalProgress"></div>
To jest wstawiany arkusz stylów. Nie wbudowane css. – Esger
Poza faktem, że to nie rozwiązuje faktycznego pytania, ten kod jest niepoprawny, pseudoelementy ':: after' i' :: before' wymagają 'content: value' w przeciwnym razie domyślnie jest to' content: none' co w zasadzie nic nie daje. – zer00ne
Czy trzeba go inline ? – Scrimothy
Nie można używać wbudowanych stylów do kierowania pseudo-klas lub pseudo-elementów. –
Prawdopodobny duplikat [Pseudo-klas CSS ze stylami wstawianymi] (http://stackoverflow.com/questions/5293280/css-pseudo-classes-w-inline-styles) – Champ