是否可以在CSS中设置子字符串的样式? [英] Is it possible to style a substring in CSS?

问题描述

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

I want to emphasise the last 3 characters of a string, example:

123456 789

易于用< strong> 或&s; span class ="> 包裹最后三个，但是我想知道是否可以使用CSS来完成只要?因此html类似于:

Easy to wrap the last three with <strong> or <span class="">, but I was wondering if it could be done with CSS only? So the html would be something like:

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

在CSS mytext 类中添加了重点?

With the emphasis added in CSS mytext class?

推荐答案

这只是一个疯狂的主意，实际上使显示有点错误.

Just a crazy idea, that actually get a display a little bit wrong.

只需将其发布以给其他人一些改进的想法.

Just post it to give some ideas for someone else to improve it.

.mytext {
  display: inline-block;
  margin: 10px;
  font-size: 50px;
  font-family: monospace;
  position: relative;
  color: black;
  text-shadow: -1px -1px 0px white, -1px 0px 0px white,  -1px 1px 0px white, 
  0px -1px 0px white,   0px 0px 0px white, 0px 1px 0px white,   
  1px -1px 0px white, 1px 0px 0px white, 1px 1px 0px white;
}

.mytext:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3ch;
  background-color: white;
  mix-blend-mode: difference;
}

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

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

这篇关于是否可以在CSS中设置子字符串的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！