Is there an easy way to style the last couple characters of a string?

Question

I have some floating point numbers where I would like to indicate that that the last few digits are not that important. What I have in mind is something like this.

For the number 273.978

<span style="font-weight:bold">273.9</span><span style="color:#3399ff">78</span>

It would be great if there were something like a "nth-last-chars" CSS selector. Then I could set this all up in my CSS file, instead of chopping the number in JavaScript. Is there a better way to achieve this?

EDIT: Here's what a native JavaScript solution looks like:

<span id="numstart" style="font-weight:bold">123.4</span><span id="numend" style="color:#3399ff">57</span>

<script>
var newnum = 273.978;
var numStr = String(newnum)
var numLen = numStr.length;
var newStart = numStr.substring(0,numLen-2);
var newEnd = numStr.substring(numLen-2,numLen);
document.getElementById("numstart").innerHTML = newStart;
document.getElementById("numend").innerHTML = newEnd;
</script>

Answer 1

Had the same idea as stef:

<style type="text/css">
    .number {
        font-family: monospace;
    }
    .number:after {
        background-color: rgba(255,255,255,0.5);
        content: "";
        display: inline-block;
        height: 1em;
        width: 1.2em;
        position: relative;
        top: 0.25em;
        right: 1.2em;
    }
</style>

<span class="number">273.978</span>

Answer 2

Off the top of my head in jQuery:

<script type="text/javascript">
$('.numbers').each(function() {
    $(this).html(
        $(this).html().substr(0, $(this).html().length-2)
          + "<span style='color: #3399ff'>"
          + $(this).html().substr(-2)
          + "</span>");
});
</script>

Here's a fiddle to demonstrate it. I'm sorry it's not plain JavaScript, but I'm sure one of the folks here can offer a native solution if this doesn't cut your corn.

UPDATE: And here's a non-jQuery solution, and another fiddle demonstrating it. I also broke the style out into CSS.

<style type="text/css">
.unimportant {
    color: #3399ff;
}
</style>

<script type="text/javascript">
var numberTargets = document.getElementsByClassName('number');
for(i=0; i<numberTargets.length; i++) {
    var html = numberTargets[i].innerHTML;
    numberTargets[i].innerHTML = html.substr(0, html.length-2)
      + "<span class='unimportant'>"
      + numberTargets[i].innerHTML.substr(-2)
      + "</span>";
}
</script>

Answer 3

Other than a server-side approach (the easiest), you could add an overlay span that has width: 1.75em; background-color: rgba(255,255,255,0.5) and fix it to the right of a container object and a z index greater than the main float display object.

If you're feeling experimental you could try the HTML5 <input type="number" step="0.1" /> element, which depending on the browser would round to the nearest value based on its value.

Answer 4

You could use PHP to add a class to the span tag for the first 3/4 chars (I assume you are using php to generate these floating point numbers) and a different class to anything after that,

Then simply add the classes to your CSS file to highlight as you wish.

AFAIK there are no CSS selectors to do what you require, the 'nth' selectors are more for tags, classes and ids than individual chars.

EDIT: In javascript this can be done via using foo.charAt(N);

So load your string into a var:

var foo=[number generation code];
var foo0=foo.charAt(0);
var foo1=foo.charAt(1);
var foo2=foo.charAt(2);
var foo3=foo.charAt(3);

You can then print out the chars into the appropriate place in the code.