Inline CSS Pseudo-Classes

CSS Pseudo-classes with inline styles

No, this is not possible. In documents that make use of CSS, an inline style attribute can only contain property declarations; the same set of statements that appears in each ruleset in a stylesheet. From the Style Attributes spec:

The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces), whose formal grammar is given below in the terms and conventions of the CSS core grammar:
declaration-list
  : S* declaration? [ ';' S* declaration? ]*
  ;

Neither selectors (including pseudo-elements), nor at-rules, nor any other CSS construct are allowed.

Think of inline styles as the styles applied to some anonymous super-specific ID selector: those styles only apply to that one very element with the style attribute. (They take precedence over an ID selector in a stylesheet too, if that element has that ID.) Technically it doesn't work like that; this is just to help you understand why the attribute doesn't support pseudo-class or pseudo-element styles (it has more to do with how pseudo-classes and pseudo-elements provide abstractions of the document tree that can't be expressed in the document language).

Note that inline styles participate in the same cascade as selectors in rule sets, and take highest precedence in the cascade (!important notwithstanding). So they take precedence even over pseudo-class states. Allowing pseudo-classes or any other selectors in inline styles would possibly introduce a new cascade level, and with it a new set of complications.

Note also that very old revisions of the Style Attributes spec did originally propose allowing this, however it was scrapped, presumably for the reason given above, or because implementing it was not a viable option.

Inline CSS Pseudo-classes

As a matter of fact, the same document was referenced in another question here. This is what I had to say about it:

That document you link to is a 10-year-old draft.

It's 11 years old now, but that's not the point (although it does suggest a very likely reason why the example you give doesn't work). The point is that the example given does not appear in the latest revision of the same specification. So, supposedly, embedding selectors in style attributes was deemed not viable and dropped as a result.

My answer to the question linked in the comments suggests why such a feature was deemed not viable — it's simply not compatible with the current state of CSS as a language:

Note that inline styles participate in the same cascade as selectors in rule sets, and take highest precedence in the cascade (!important notwithstanding). So they take precedence even over pseudo-class states. Allowing pseudo-classes or any other selectors in inline styles would possibly introduce a new cascade level, and with it a new set of complications.

Of course, I don't claim to speak for the people who actually made the decisions and/or wrote the spec, but if I were one of them, that's the reason I would have given for not supporting the feature.

That would also explain why no browser has implemented such a feature (or, more likely, the lack of implementation was among the factors causing it to be reconsidered and then ultimately dropped, giving vendors even more of a reason not to start implementing it now that the spec has reached CR status).

The lesson here is to never cite old revisions of W3C technical documents as canon. Always remember to review the latest specification; you should be able to find a link in the header of the document.

Is it possible to create inline pseudo styles?

Unfortunately no, you can't implement hover effects using inline CSS.

A (poor) work-around for this problem is to have your controls render style blocks when they are rendered. For example, your control could render as:

<style type="text/css">
    .custom-class { background-color:green; }
    .custom-class:hover { background-color:Red; }
</style>
<a href="#" class="custom-class">Coding Horror</a>

If you could force your users to drop a "style control" at the top of their pages you could render all your custom classes there instead of rendering them next to each control, which would be a very, very bad thing (browsers will restart rendering every time they come across a style block, having a lot of style blocks scattered around your page will cause slow rendering).

Unfortunately there's no elegant solution to this problem.

CSS Pseudo-classes with inline styles in react.js

In HTML & CSS

.testAfter::after {

  content: "->"

 }

<div class="testAfter">Something</div>

React pseudo selector inline styling

My advice to anyone wanting to do inline styling with React is to use Radium as well.

It supports :hover, :focus and :active pseudo-selectors with minimal effort on your part

import Radium from 'radium'

const style = {
  color: '#000000',
  ':hover': {
    color: '#ffffff'
  }
};

const MyComponent = () => {
  return (
    <section style={style}>
    </section>
  );
};

const MyStyledComponent = Radium(MyComponent);

Update 04/03/2018

This has been getting a few upvotes lately so I feel like I should update it as I've stopped using Radium. I'm not saying Radium isn't still good and great for doing psuedo selectors, just that it's not the only option.

There has been a large number of css-in-js libraries since Radium came out which are worth considering. My current pick of the bunch is emotion, but I encourage you to try a few out and find the one that fits you best.

emotion - ‍ The Next Generation of CSS-in-JS
fela - Universal, Dynamic & High-Performance Styling in JavaScript
styled-jss - Styled Components on top of JSS
react-jss - JSS integration for React
jss - JSS is a CSS authoring tool which uses JavaScript as a host language
rockey - Stressless CSS for components using JS. Write Component Based CSS with functional mixins.
styled-components - Universal, Dynamic & High-Performance Styling in JavaScript
aphrodite - It's inline styles, but they work! Also supports styling via CSS
csx - ϟ A CSS-in-JS solution for functional CSS in functional UI components
styled-jsx - Full CSS support for JSX without compromises
glam - crazy good css in your js
glamor - css in your javascript
glamorous - React component styling solved with an elegant API, small footprint, and great performance (via glamor)
styletron - ⚡️ Universal, high-performance JavaScript styles
radium - Set of tools to manage inline styles on React elements.
aesthetic - Aesthetic is a powerful React library for styling components, whether it be CSS-in-JS using objects, importing stylesheets, or simply referencing external class names.
j2c - CSS in JS library, tiny yet featureful

(Source)

CSS pseudo-element in inline attribute style

It’s not possible. The working draft you are referring to is over 12 years old. Click on the link “Latest version” in it, and you’ll find the CSS Style Attributes, a W3C Recommendation (“W3C standard”). It was approved recently. It contains no changes to the style attribute as in HTML specs, and this is indeed the message: the attribute has not been enhanced, and there are no plans to do so.

The conclusions depend on why you would use the construct. Normally, just assign an id attribute to the element and use an id selector in CSS.

Defining a link's pseudo-class style with inline CSS

No, you can't.
Please, if it is possible, refrain from inline styles. They are bad practice.
If you really need to do this inline without stylesheets, you can solve this with javascript:
<a onmouseover="window.oldlinkcolor=this.style.color;this.style.color='#ffffff';" onmouseout="this.style.color=window.oldlinkcolor;">...</a>
Though, using onmouseover and onmouseout statically like that is also bad practice, but it will solve your issue cross browser.

Adding CSS pseudo elements inline

No, it is not possible to apply pseudo selectors via inline CSS, that's only possible from within <style></style> blocks or external stylesheet file.

Imagine constructing an email template with inline pseudo selector that uses content property, bad guys could have done the harm I suppose. So it is not possible.