Coder Perfect

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


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

What inline css isn’t fugly…?

Answered by honk31

Solution #3

The data can be used inline.

 td { text-align: justify; }
 td:after { content: attr(data-content); display: inline-block; width: 100%; }

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


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