如何使用 css 突出显示小数位

Question

我想知道热以使用CSS突出显示数字的小数位。 例如：<span class="something">$291.27</span>我希望它是$291.**27**

Answer 1

你可以尝试在 CSS 的帮助下 ：：before& ：：after伪元素。

.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>

Answer 2

使用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>

如果您只想要着色，可以执行以下操作：

.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>

下面像下面一样增加一些重量：

.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>

Answer 3

您可以在 HTML 中添加另一个类：

.something-else{
color:red;
}

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

或者你可以像这样使用伪类：

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

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

或者，如果文本的长度总是相同的，那么您可以使用渐变做一件疯狂的事情：

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>

或者你可以使用 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>