Problem
I’m creating an HTML email signature with inline CSS (CSS in style attributes), and I’m wondering if the:before and:after pseudo-elements can be used.
If that’s the case, how would I go about doing something like this with inline CSS?
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
Asked by Bah-Bee
Solution #1
Pseudo-elements do not support inline styles.
This is because, like pseudo-classes (see my previous response), pseudo-elements are constructed in CSS using selectors as abstractions of the document tree that cannot be described in HTML. An inline style attribute, on the other hand, is a style attribute that is supplied for a specific element within HTML.
Because inline styles can only be defined in HTML, they will only apply to the HTML element on which they are defined, not to any pseudo-elements it generates.
In this regard, the key distinction between pseudo-elements and pseudo-classes is that attributes that are inherited by default are inherited by:before and:after from the producing element, whereas pseudo-class styles are ignored entirely. If you use text-align: justify in an inline style property for a td element, for example, it will be inherited by td:after. The limitation is that you can’t use the inline style property to define td:after; you have to write it in the stylesheet.
Answered by BoltClock
Solution #2
As previously stated, a CSS pseudo-class / -element cannot be called inline. Giving your element a unique identifier, such as an id or a unique class, is what I did now. and a corresponding style> element
<style>#id29:before { content: "*";}</style>
<article id="id29">
<!-- something -->
</article>
What inline css isn’t fugly…?
Answered by honk31
Solution #3
The data can be used 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>
Answered by Cevher
Solution #4
Inline CSS does not allow for the creation of pseudo elements.
If you can create a pseudo element in a stylesheet, you can style it inline by applying an inline style to its parent element and then styling the pseudo element with the inherit keyword, as seen here:
<parent style="background-image:url(path/to/file); background-size:0px;"></p>
<style>
parent:before{
content:'';
background-image:inherit;
(other)
}
</style>
This can be useful at times.
Answered by Artem Mamaev
Solution #5
No, as David Thomas pointed out, you can’t use inline-css to target pseudo-classes or pseudo-elements. See BoltClock’s answer to Pseudo-classes for further information.
The pseudo-elements can also be written in the same way.
Answered by GajendraSinghParihar
Post is based on https://stackoverflow.com/questions/14141374/using-css-before-and-after-pseudo-elements-with-inline-css