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

User · Answer

Yes it s possible  just add inline styles for the element which you adding after or before  Example    lt style gt        horizontalProgress after   width  45       lt  style gt  lt  -- Change Value from Here -- gt     lt div class  horizontalProgress  gt  lt  div gt

User · Answer

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    lt parent style  background-image url path to file   background-size 0px   gt  lt  p gt    lt style gt      parent before        content           background-image inherit         other        lt  style gt    sometimes this can be handy

User · Answer

You can use the data in inline    lt style gt      td   text-align  justify     td after   content  attr data-content   display  inline-block  width  100      lt  style gt    lt table gt  lt tr gt  lt td data-content  post  gt  lt  td gt  lt  tr gt  lt  table gt

User · Answer

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

User · Answer

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    lt table gt   lt tr gt   lt td style  text-align  justify   gt  TD Content  lt span class  inline td after  style  display  inline-block  width  100    gt  lt  span gt   lt  td gt   lt  tr gt   lt  table gt    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

User · Answer

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

User · Answer

you can use   parent style setProperty  --padding-top    height 100 width  toFixed 2          in css   el after           padding-top var --padding-top  0px

User · Answer

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

User · Answer

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  lt style gt  element   lt style gt  id29 before   content        lt  style gt   lt article id  id29  gt     lt  -- something -- gt   lt  article gt    fugly  but what inline css isnt

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

Examples related to html

Examples related to css

Examples related to css-selectors

Examples related to pseudo-element

Examples related to inline-styles