Last-word (faux pseudo class)

[PaulOB]

Because its quiet around here I thought I’d just throw this out for fun

An old client just asked me if I could colour the last word in the heading of his site without changing the html. He wanted a quick fix as the html or content of the heading was not going to change.

I came up with one way of doing it but maybe you’d like to have a go on your own and see what you can come up with. Note that the html can wrap to multiple lines depending on screen size so the effect has to be maintained for wrapping lines and user font-size scaling

Simply (or not so simply) colour the last word only in this heading with css only.

<h1>Your test is to make the very last word in this heading to be a different colour</h1>

Here’s my attempt but don’t peak if you want to have a go yourself.

CSS has :first-letter but not :first-word or :last-word so don’t try looking for those:)

The solution is just for fun and not one to be used where content may change (that’s a hint ;)).

[DaveMaxwell]

Too bad you can’t change the html just a hair…it’d be much more flexible…

[RyanReese]

@PaulOB

The solution is just for fun and not one to be used where content may change (that’s a hint ;)).

After I made this I checked yours and it seems we have thought alike!

[PaulOB]

You’re all far too clever

[DaveMaxwell]

Too bad we couldn’t use EQCSS. Coulda come up with something cool there too

[Ray.H]

I found a solution.
Do we still have the teaser format to post hidden code, so I don’t spoil for others.

Ok, I found the details tag

h1::after {
  content:"colour";
  color:red;
  margin-left:-3.058em;
}

I didn’t look at previous examples.

[PaulOB]

@Ray.H

I found a solution.

I get a partial overlap with that measurement in my Chrome Ray.

There is a more efficient way that doesn’t require any guesswork of fractions etc.

[Ray.H]

Hi Paul, yes I looked at the solution after I posted my attempt.

Mine was a bit magic numberish, It worked for my default font on FF. I realized it could be different elsewhere after I posted it.