Using CSS :before and :after pseudo-elements with inline CSS?

Question

I'm making an HTML email signature with inline CSS (i.e. CSS in style attributes), and I am curious as to whether it's possible to use the :before and :after pseudo-elements.

If so, how would I implement something like this with inline CSS?

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

Solution 1

You can't specify inline styles for pseudo-elements.

This is because pseudo-elements, like pseudo-classes (see my answer to this other question), are defined in CSS using selectors as abstractions of the document tree that can't be expressed in HTML. An inline style attribute, on the other hand, is specified within HTML for a particular element.

Since inline styles can only occur in HTML, they will only apply to the HTML element that they're defined on, and not to any pseudo-elements it generates.

As an aside, the main difference between pseudo-elements and pseudo-classes in this aspect is that properties that are inherited by default will be inherited by :before and :after from the generating element, whereas pseudo-class styles just don't apply at all. In your case, for example, if you place text-align: justify in an inline style attribute for a td element, it will be inherited by td:after. The caveat is that you can't declare td:after with the inline style attribute; you must do it in the stylesheet.

Solution 2

as mentioned above: its not possible to call a css pseudo-class / -element inline. what i now did, is: give your element a unique identifier, f.ex. an id or a unique class. and write a fitting <style> element

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

fugly, but what inline css isnt..?

Solution 3

You can use the data in 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>

Solution 4

You can't create pseudo elements in inline css.

However, if you can create a pseudo element in a stylesheet, then there's a way to style it inline by setting an inline style to its parent element, and then using inherit keyword to style the pseudo element, like this:

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

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

sometimes this can be handy.

Solution 5

No you cant target the pseudo-classes or pseudo-elements in inline-css as David Thomas said. For more details see this answer by BoltClock about Pseudo-classes

No. The style attribute only defines style properties for a given HTML element. Pseudo-classes are a member of the family of selectors, which don't occur in the attribute .....

We can also write use same for the pseudo-elements

No. The style attribute only defines style properties for a given HTML element. Pseudo-classes and pseudo-elements the are a member of the family of selectors, which don't occur in the attribute so you cant style them inline.

View more solutions

Comments

[Sikshya Maharjan]

You can't use inline styles to target pseudo-classes or pseudo-elements.

[GajendraSinghParihar]

probally duplicate of CSS Pseudo-classes with inline styles

[BoltClock]

@Champ: Not the same question, as pseudo-elements and pseudo-classes are not the same thing. I wrote answer of my own here to elaborate.

[BoltClock]

See my answer and my comment on the question.

[GajendraSinghParihar]

yes the are not same. but the reason behind that they cant be used inline is same right?

[BoltClock]

The answers are similar, but the questions are very different.

[kez]

that's not inline CSS. Inline CSS requires the style="" attribute to be passed to the individual HTML elements. Commonly required for sending CSS formatted to Gmail, which strips anything in <style> tags. See here (zurb.com/ink/inliner.php) for an automator

[Nils Kaspersson]

This prints the data-content attribute as content for a pseudo-element. It has nothing to do with creating pseudo-elements with inline CSS.

[Ben J]

I think this is the closest you can get to inline pseudo-elements. Better yet, use the new scoped styles and :root psuedo-class (this is so cool): <article><style scoped>:root:before { content: "*";}</style><!-- something --></article>.

[Ben J]

Correction: Use the :scope pseudo-class: <article><style scoped>:scope:before { content: "*";}</style><!-- something --></article>

[Ben J]

This stuff is very new, probably not implemented, and will possibly change. It's in the current HTML spec (scoped styles) and CSS Spec (:scope). I should have been more clear.

[wunth]

I came here looking for how to apply pseudo selectors in inline CSS and this answer showed me another way to achieve the same thing. The content needed to be based on a large number of possible options created dynamically and so it wasn't practical to write heaps of separate CSS selectors for every possible result.

[Esger]

This is an inline stylesheet. Not inline css.

[Aleks]

This actually is a very good answer for someone seeking to add dynamic content to an after content. Might not be that related to this issue, but this question is being displayed when searching for this solution via Google.

[zer00ne]

Other than the fact that this doesn't resolve the actual question, this code is wrong, ::after and ::before pseudo-elements need the content: value otherwise it defaults to content:none which results in basically nothing.

[James Anderson Jr.]

Using <style>...</style> tags is called internal or embedded CSS, NOT inline CSS.

[James Anderson Jr.]

Using <style>...</style> tags is called internal or embedded CSS, NOT inline CSS.

[Sebastian Simon]

See the documentation.

[Sebastian Simon]

They are pseudo-elements which are not states.

[tcurdt]

This looks great. Unfortunately it does not seem to work for setting an url.

[TylerH]

This also is not inline CSS.

[TylerH]

And where are you going to write that div::before style?

[TylerH]

(Hint: this answer is not useful because you can't apply the CSS from it when writing inline styles, which is what the question is about).

[headwinds]

I found this answer helpful since I'm using css before & after and wanted to set the colour dynamically which I was able to do so by applying this approach

[Chrysotribax]

Very useful answer ! Not exactly what the OP ask for, but it works for content property of after/before pseudo element.