Using CSS ::before and ::after pseudo-elements with inline CSS?
css, css-selectors, html, inline-styles, pseudo-element
Solution
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.
Problem
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%; } ```