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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With