How to set the content property of an `after` pseudo-element to an attribute of a sibling form element

Question

Is there any way, using CSS, to set the content of an after pseudo-element to an attribute of a sibling form element?

For example:

p:after{
  content: +select(attr(title));
}

<p>Message: </p>

<select>
  <option title="Hi" value="1">Hi</option>
  <option title="Hello" value="2" selected>Hello</option>
  <option title="Goodbye" value="3">Goodbye</option>
</select>

The desired rendered output in this example would be: Message: Hello

If this is not currently possible, are there any plans in the CSS4 (or 5?) specification to allow the use of selectors in the content property?

I have a jQuery solution, however I am curious if this is something I could do without javascript?

Answer 1

The attr() function can only take an attribute from the originating element, both in CSS level 2 and CSS Values level 3 (the latter of which hasn't even been implemented yet).

Work hasn't started on a level 4 module yet, but given the introduction of a Non-element Selectors module, which currently features an attribute node selector, it wouldn't be that far-fetched to incorporate such a feature into a level 4 attr() function. But considering the lack of interest in implementing the level 3 attr(), which has been at-risk for years now, I really wouldn't hold my breath. Which is a real shame, because I too see a lot of potential in the CSS attr() function for authors.