css - 是否可以在 CSS 中设置子字符串的样式？

Question

我想强调一个字符串的最后 3 个字符，例如:

123456789

很容易用 <strong> 或 <span class=""> 包装最后三个，但我想知道是否只能用 CSS 来完成？所以html会是这样的:

<span class="mytext">123456789</span>

在 CSS mytext 类中添加重点？

Answer 1

这是一个疯狂的想法，使用过滤器和 SVG 来模拟最后 3 位数字的粗体效果。

仅适用于 chrome

.mytext {
  display: inline-block;
  margin: 10px;
  font-size: 50px;
  font-family: monospace;
  position: relative;
  filter: drop-shadow(0px 0px 0px black);
}

.mytext:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3ch;
  backdrop-filter: url(#shadow);
}

<span class="mytext">123456789</span>

<span class="mytext" style="font-size:25px">123456789568</span>
<span class="mytext" style="font-size:25px">123568</span>



<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <defs>
  <filter id="shadow" color-interpolation-filters="sRGB" x="-50%" y="-50%" height="200%" width="200%">
<!-- Take source alpha, offset it by angle/distance and blur it by size -->
<feOffset id="offset" in="SourceAlpha" dx="0" dy="0" result="SA-offset"/>
<feGaussianBlur id="blur" in="SA-offset" stdDeviation="1" result="SA-o-blur"/>
<!-- Apply a contour by using a color curve transform on the alpha and clipping the result to the input -->

<feComponentTransfer in="SA-o-blur" result="SA-o-b-contIN">
  <feFuncA id="contour" type="table" tableValues="0 1 0.65 0.5 0.55 0.6 0.65 0.55 0.4 0.1 0"/>
</feComponentTransfer>

<feComposite operator="in" in="SA-o-blur" in2="SA-o-b-contIN" result="SA-o-b-cont"/>

<!-- Adjust the spread by multiplying alpha by a constant factor --> <feComponentTransfer in="SA-o-b-cont" result="SA-o-b-c-sprd">
  <feFuncA id="spread-ctrl" type="linear" slope="11"/>
</feComponentTransfer>

<!-- Adjust color and opacity by adding fixed offsets and an opacity multiplier -->
<feColorMatrix id="recolor" in="SA-o-b-c-sprd" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" result="SA-o-b-c-s-recolor"/>

<!-- Generate a reasonably grainy noise input with baseFrequency between approx .5 to 2.0. And add the noise with k1 and k2 multipliers that sum to 1 -->
<feTurbulence result="fNoise" type="fractalNoise" numOctaves="6" baseFrequency="1.98"/>
<feColorMatrix in="fNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 7 -3" result="clipNoise"/>
<feComposite id="noisemix" operator="arithmetic" in="SA-o-b-c-s-recolor" in2="clipNoise" k1="0" k2="1" result="SA-o-b-c-s-r-mix"/>

<!-- Merge the shadow with the original -->
<feMerge>
  <feMergeNode in="SA-o-b-c-s-r-mix"/>
  <feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
  </defs>
</svg>

我使用以下链接生成过滤器: https://codepen.io/mullany/pen/sJopz