5

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Richard Parnaby-King
  • 14,703
  • 11
  • 69
  • 129
  • unfortunately, it is not possible via CSS. this kind of possibilitie would be great in many ways :) – G-Cyrillus Mar 05 '15 at 13:09
  • There is nothing like CSS4 and there will be no CSS5. - And to your question. JavaScript is designed to make pages dynamic. In your case its the way to go. – Der Vampyr Mar 05 '15 at 13:12
  • Technically it's CSS level 4 (and CSS level 3). No confusion possible as thre's no CSS4. – FelipeAls Mar 05 '15 at 13:25

2 Answers2

2

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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
-3

Hahaha LOL .. just sharing how funny is this ..

$( 'p' ).after('<style></style>');
$( 'select' ).on( 'change', function(){
//$( 'p' ).text('Message: ' +$( 'select option:selected' ).text());
$( 'style' ).html('p:after{content: "'+$( 'select option:selected' ).text()+'" }');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
Anthony Carbon
  • 608
  • 1
  • 5
  • 18