Can I format part of a string using just CSS?

Question

Given HTML that looks like this:

<td class="n">1234.56</td>

I would like, using only CSS (without having to use, say, a <span> element in the HTML), to format the number with the last two digits (or, in general, characters) diminished in size.

My goal is to write a CSS stylesheet rule for the unadorned HTML above that behaves as if I had this:

<style>
.diminish { font-size: 50% }
</style>
<td class="number">1234.<span class="diminish">56</span></td>

You kind could but not really, if the content is always 1234.56 then you could use :before or :after to manipulate it but I am sure you have different content — Huangism
– Huangism, Commented Mar 9, 2015 at 18:34
::before and ::after insert a fake element before and after the current one, so it wouldn't select the digits which are part of the element. The only CSS selector which can select characters is ::first-letter which selects the first letter of a paragraph. You have no choice but to edit the html, sorry. — Domino
– Domino, Commented Mar 9, 2015 at 18:43
What if you changed it to have a space before the decimal point? Is that doable? — MDEV
– MDEV, Commented Mar 9, 2015 at 18:44
@SmokeyPHP, I could (with some pretty weird rendering code)..., but I wonder what you're driving at? — Cary Millsap
– Cary Millsap, Commented Mar 9, 2015 at 18:47
Just thinking about white space wrapping with a hidden overflow and then same again for the other part in a pseudo element. You'd set the size small but to allow horizontal overflow and turn off word breaking, then hide the bottom wrapping (the decimals), then try and get just the second line in the :after pseudo element with the same technique — MDEV
– MDEV, Commented Mar 9, 2015 at 18:49

taxicala · Accepted Answer · 2015-03-09 18:32:00Z

3

That is not possible with pure CSS. Only html as you pointed out or Javascript.

answered Mar 9, 2015 at 18:32

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can I format part of a string using just CSS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related