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%;
}

Miguelmiguela

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

you can but via css vars https://mcmap.net/q/127191/-using-css-before-and-after-pseudo-elements-with-inline-css – Nonah

Answer 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.

Cigarillo

Answer 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..?

Printmaker

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 – Navy

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>. – Georgy

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

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. – Georgy

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

Answer 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>

Gainsay

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

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. – Lamellirostral

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. – Salmon

See the documentation. – Hautbois

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

This also is not inline CSS. – Overelaborate

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

Answer 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;"></parent>

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

sometimes this can be handy.

Percolator

I don´t know if stackoverflow likes that people comment in this way but I have to say that I really love this solution. It works like a charme. The usecase is to have something like an icon which has to be in "before" because it´s positioned absolute (For example outside the parent div) and you are using dynamic pictures (For example via a CMS). Thank you. – Garbo

Lars, you're welcome. I also suggest using a custom property like --icon:var(--my-icon), where --icon:url('default-image'); background-image:var(--icon), --my-icon:url("file_URL"), or a 10*10 icons SVG sprite as a background with --row:1;--column:1; background-size:1000%; --icon-size:16px; height: var(--icon-size); aspect-ratio: 1; background-position-x: calc(calc(var(--icon-size)* -1) * calc(var(--column) - 1));background-position-y: calc(calc(var(--icon-size)* -1) * calc(var(--row) - 1));. Also, you can make a custom web component:<my-icon row="1" column="1" size="20px"></my-icon> – Postliminy

Answer 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.

Mobcap

See my answer and my comment on the question. – Cigarillo

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

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

Answer 6

As mentioned before, you can't use inline elements for styling pseudo classes. Before and after pseudo classes are states of elements, not actual elements. You could only possibly use JavaScript for this.

Scruple

They are pseudo-elements which are not states. – Hautbois

Answer 7

Yes it's possible, just add inline styles for the element which you adding after or before, Example

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

 <div class="horizontalProgress"></div>

Hitherto

This is an inline stylesheet. Not inline css. – Postcard

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. – Treasurehouse

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

Welp. Despite the comments, this solution did what I wanted in the end. I didn't want to make a single entry in the stylesheet when everything else was embedded in the HTML so this works. – Pavlodar

Answer 8

If you have control over the HTML then you could add a real element instead of a pseudo one. ::before and ::after pseudo elements are rendered right after the open tag or right before the close tag. The inline equivalent for this css

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

Would be something like this:

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

Keep in mind; Your "real" before and after elements and anything with inline css will greatly increase the size of your pages and ignore page load optimizations that external css and pseudo elements make possible.

Standardize

Answer 9

EDITED: If you have access to the stylesheet, you can pass the variable values inline and then, in your stylesheet, use the inherit value for the pseudo-element property you want to manipulate:

HTML

<div style="color: whitesmoke;">
</div>

CSS

div::before {
  content: '';
  color: inherit;
}

Useful for background images for example.

Lockridge

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

(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). – Overelaborate

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 – Whomsoever

Answer 10

you cant change style of pseudo-elements with inline CSS, but you can use vars from inline style and apply these vars to pre-defined style of pseudo-elements, so here we can indirectly change pseudo-elements style

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

in css

el:after{
  ....
  padding-top:var(--padding-top, 0px);
}

Nonah

This does not answer the question at all and it's also unclear what you're trying to do here – Tyrannosaur

you cant change style of pseudo-elements with inline CSS, but you can use vars from inline style and apply these vars to pre-defined style of pseudo-elements, so here we can indirectly change pseudo-elements style – Nonah