How to apply CSS to second word in a string?

Tags: css

Problem :

If I have the following string: John Smith, how could I use CSS to set font-weight: bold on the second word in order to achieve: John Smith.

Can this be done in pure CSS?

Update: I am retrieving user's name from the server, so in my template it is #{user.profile.name}.

---

Solution :

Since a js solution was suggested and pure CSS isn't presently possible: Live demo (click).

Sample markup:

<p class="bold-second-word">John Smith</p>
<p class="bold-second-word">This guy and stuff.</p>

JavaScript:

var toBold = document.getElementsByClassName('bold-second-word');
for (var i=0; i<toBold.length; ++i) {
  boldSecondWord(toBold[i]);
}

function boldSecondWord(elem) {
  elem.innerHTML = elem.textContent.replace(/\w+ (\w+)/, function(s, c) {
    return s.replace(c, '<b>'+c+'</b>');
  });
}