Używanie pseudoelementów CSS: before i: after z wbudowanym CSS?

141

Robię to HTML email podpisu inline CSS (tj CSS w styleatrybutach) i jestem ciekaw, czy to możliwe, aby wykorzystać :beforei :afterpseudo-elementy.

Jeśli tak, jak zaimplementowałbym coś takiego z wbudowanym CSS?

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
Bah-Bee
źródło
8
Nie można używać stylów wbudowanych do kierowania na pseudoklasy lub pseudoelementy.
David mówi, że przywróć Monice
2
prawdopodobnie duplikat pseudoklas CSS ze stylami wbudowanymi
Mistrz
2
@Champ: To nie to samo pytanie, ponieważ pseudoelementy i pseudoklasy to nie to samo. Napisałem tutaj własną odpowiedź, aby ją rozwinąć.
BoltClock

Odpowiedzi:

123

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 styledrugiej 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 :beforeiz :afterniego, podczas gdy style pseudoklas po prostu nie mają zastosowania. W twoim przypadku, na przykład, jeśli text-align: justifyumieścisz atrybut stylu wbudowanego dla tdelementu, zostanie on odziedziczony przez td:after. Zastrzeżenie jest takie, że nie możesz deklarować td:afterz atrybutem stylu wbudowanego; musisz to zrobić w arkuszu stylów.

BoltClock
źródło
37

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ący

<style>#id29:before { content: "*";}</style>
<article id="id29">
  <!-- something -->
</article>

fugly, ale jakiego css inline nie jest ..?

honk31
źródło
6
to nie jest wbudowany CSS. Wbudowany CSS wymaga przekazania atrybutu style = "" do poszczególnych elementów HTML. Zwykle wymagane do wysyłania do Gmaila sformatowanego CSS, który usuwa wszystko w tagach <style>. Zobacz tutaj ( zurb.com/ink/inliner.php ) dla automatora
kez
Myślę, że jest to najbliższe pseudoelementy, jakie można uzyskać. Jeszcze lepiej, korzystać z nowych scopedstylów i :rootpsuedo klasy (to jest cool) <article><style scoped>:root:before { content: "*";}</style><!-- something --></article>.
Ben J
3
Korekta: użyj :scopepseudoklasy:<article><style scoped>:scope:before { content: "*";}</style><!-- something --></article>
Ben J
1
Te rzeczy są bardzo nowe, prawdopodobnie nie zostały zaimplementowane i prawdopodobnie ulegną zmianie. Znajduje się w aktualnej specyfikacji HTML ( scopestyle d) i specyfikacji CSS ( :scope) . Powinienem być bardziej dokładny.
Ben J,
Używanie tagów <style> ... </style> nazywane jest wewnętrznym lub osadzonym CSS, a NIE wbudowanym CSS.
James Anderson Jr.
14

Możesz użyć danych w tekście

 <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>
Cevher
źródło
2
Wypisuje data-contentatrybut jak contentpseudoelement. Nie ma to nic wspólnego z tworzeniem pseudoelementów za pomocą wbudowanego CSS.
Nils Kaspersky,
4
Przyszedłem tutaj, szukając sposobu zastosowania pseudoselektorów w wewnętrznym CSS, a ta odpowiedź pokazała mi inny sposób osiągnięcia tego samego. Treść musiała opierać się na dużej liczbie możliwych opcji tworzonych dynamicznie, dlatego pisanie wielu oddzielnych selektorów CSS dla każdego możliwego wyniku nie było praktyczne.
wunth
4
W rzeczywistości jest to bardzo dobra odpowiedź dla kogoś, kto chce dodać zawartość dynamiczną do treści po. Może nie jest to związane z tym problemem, ale to pytanie jest wyświetlane podczas wyszukiwania tego rozwiązania przez Google.
Aleks
Zobacz dokumentację .
user4642212
8

Nie, nie możesz kierować na pseudoklasy lub pseudoelementy w inline-css, jak powiedział David Thomas . Aby uzyskać więcej informacji zobacz odpowiedź za BoltClock o Pseudoklasy

Nie. Atrybut style definiuje tylko właściwości stylu dla danego elementu HTML. Pseudoklasy należą do rodziny selektorów, które nie występują w atrybucie .....

Możemy również napisać use dla pseudoelementów

Nie. Atrybut style 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żna ich stylizować w tekście.

Mistrz
źródło
Zobacz moją odpowiedź i mój komentarz do pytania.
BoltClock
tak, to nie to samo. ale powód, dla którego nie można ich używać w tekście, jest taki sam, prawda?
Mistrz
Odpowiedzi są podobne, ale pytania są bardzo różne.
BoltClock
6

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:

<parent style="background-image:url(path/to/file); background-size:0px;"></p>

<style> 
   parent:before{
      content:'';
      background-image:inherit;
      (other)
   }
</style>

czasami może się to przydać.

Artem Mamaev
źródło
5

Tak, jest to możliwe , po prostu dodaj style w tekście do elementu, który dodajesz po lub przed, Przykład

 <style>
     .horizontalProgress:after { width: 45%; }
 </style><!-- Change Value from Here -->

 <div class="horizontalProgress"></div>
Manik Biradar
źródło
22
To jest wbudowany arkusz stylów. Nie wbudowany CSS.
Esger,
4
Poza faktem, że to nie rozwiązuje rzeczywistego pytania, ten kod jest błędny, ::aftera ::beforepseudoelementy wymagają tego, co content: valuejest domyślne, content:noneco w zasadzie nic nie daje.
zer00ne
Używanie tagów <style> ... </style> nazywane jest wewnętrznym lub osadzonym CSS, a NIE wbudowanym CSS.
James Anderson Jr.
1

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.

Nesha Zoric
źródło
Są pseudoelementami , które nie są stanami.
user4642212
0

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

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

Byłoby coś takiego:

<table>
<tr>
<td style="text-align: justify;">
TD Content
<span class="inline_td_after" style="display: inline-block; width: 100%;"></span>
</td>
</tr>
</table>

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.

txyoji
źródło
0

możesz użyć

parent.style.setProperty("--padding-top", (height*100/width).toFixed(2)+"%");

w css

el:after{
  ....
  padding-top:var(--padding-top, 0px);
}
surinder singh
źródło