时间戳

首页 > 解决方案 > 如何使用css突出显示小数位

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

问题描述

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

标签： css

解决方案

一个疯狂的想法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>

推荐阅读