How to highlight the decimal places using css

Question

I want to know hot to highlight the decimal places of a number using CSS. For example: <span class="something">$291.27</span> I want it to be $291.**27**

Why are you required to do it with CSS, can't you do it with JS? — Timothy Chen, Dec 14 '20 at 02:54
Not with pure CSS. What server side language do you use? Do you know javascript? — Adhitya, Dec 14 '20 at 04:04
Why not split the number into two parts and handle decimal part separately? ```your_number.toString().split(".")``` should help you get two parts of your number and then you can put them in different spans and handle css accordingly. — Mahesh, Dec 14 '20 at 04:36

Mahmood Kiaheyrati · Answer 1 · 2020-12-14T16:21:27.723

0

You can add another class to your HTML:

.something-else{
  color:red;
}

<span class="something">$291.<span class="something-else">27</span></span>

Or you can use pseudo classes like so:

.something::before{
  content: attr(int);
}
.something::after{
  content: "."attr(float);
  color:red;
}

<span class="something" int="$291" float="27"></span>

Or if the length of text is always the same, then you can do a crazy thing using gradients:

span {
  background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 66%, rgba(255,0,0,1) 75%, rgba(255,0,0,1) 100%);
  background-clip: text;
  color: rgba(0, 0, 0, 0);
}

<span class="something">$154.12</span>

or you can use js:

var el = document.querySelector('.something').innerHTML.split('.');
var changed = el[0]+'.'+'<span style="color:red;">'+el[1]+'</span>';
document.querySelector('.something').innerHTML= changed;

<span class="something">$291.27</span>

edited Dec 14 '20 at 16:21

answered Dec 14 '20 at 03:40

Mahmood Kiaheyrati

512
4
14

he asked he wants double asterisks at the start and end of the float digit – CodeBug Dec 14 '20 at 03:58
in that your `js` and `something-else` snippet only working correct, your `::before` class is making all text color red – CodeBug Dec 14 '20 at 04:02
@CodeBug that was optional, just in case he wants to know how. – Mahmood Kiaheyrati Dec 14 '20 at 04:03
@Roj thanks mate. you were right, and i deleted the last snippet. – Mahmood Kiaheyrati Dec 14 '20 at 04:28

score 0 · Answer 2 · answered Dec 14 '20 at 04:20

You can try with help of CSS ::before & ::after Pseudo-element.

.something::before{
  content: attr(data-int);
}
.something::after{
  content: '.**'attr(data-float)'**';
}

<span class="something" data-int="$291" data-float="27"></span>
<br><br>
<span class="something" data-int="$187" data-float="89"></span>
<br><br>
<span class="something" data-int="$782" data-float="12"></span>

score 0 · Answer 3 · answered Dec 14 '20 at 09:50

A crazy idea using text-shadow

.something {
  display: inline-block;
  overflow: hidden;
  font-family: monospace;
  letter-spacing: 20ch;
  font-size: 25px;
  max-width: 11ch;
  position:relative;
  text-shadow: 
    -20ch 0 0 black, 
    -40ch 0 0 black, 
    -60ch 0 0 black, 
    -80ch 0 0 black, 
    -98ch 0 0 black, 
    -118ch 0 0 black;
}

.something::after {
  position:absolute;
  right:0;
  top:0;
  content:"**  **";
  white-space:pre;
  letter-spacing:initial;
}

<span class="something">$291.27</span>
<br>
<span class="something">$300.17</span>

If you only want a coloration you can do like below:

.something {
  display: inline-block;
  overflow: hidden;
  font-family: monospace;
  letter-spacing: 20ch;
  font-size: 25px;
  max-width: 7ch;
  position:relative;
  text-shadow: 
    -20ch 0 0 black, 
    -40ch 0 0 black, 
    -60ch 0 0 black, 
    -80ch 0 0 black, 
    -100ch 0 0 red, 
    -120ch 0 0 red;
}

<span class="something">$291.27</span>
<br>
<span class="something">$300.17</span>

And like below to add some weight:

.something {
  display: inline-block;
  overflow: hidden;
  font-family: monospace;
  letter-spacing: 20ch;
  font-size: 25px;
  max-width: 7ch;
  position:relative;
  text-shadow: 
    -20ch 0 0 black, 
    -40ch 0 0 black, 
    -60ch 0 0 black, 
    -80ch 0 0 black, 
    -100ch 0 1px red,-100ch 0 1px red,-100ch 0 1px red,-100ch 0 1px red, 
    -120ch 0 1px red,-120ch 0 1px red,-120ch 0 1px red,-120ch 0 1px red;
}

<span class="something">$291.27</span>
<br>
<span class="something">$300.17</span>

How to highlight the decimal places using css

3 Answers3