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

Question

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

123456 789

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

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

CSS 类中添加了重点mytext？

Answer 1

::before和::after伪元素 { content: attr()} 值

演示1

1. 使用伪元素::before和::after
2. 将data-before="0123456"和添加data-after="789"到元素
3. content: attr(data-before)使用andcontent: attr(data-after)设置伪元素font-weight: 900

ch测量单位和等宽字体

演示2

1. 在 CSS 顶部设置以下内容：

    :root, body { font: 100 3.5vw/0.75 Consolas, monospace; }
   

   所有与字体相关的属性都将引用此规则集。这不仅有利于一致性，而且响应速度也非常快。

2. 1ch= 零字符的宽度："0"从当前font-family. 如果您使用font-family等宽字体，那么所有字符的宽度都完全相同。

演示1

注：有两种示例：一种没有文本内容，两种有文本内容。

 :root, body { font: 100 3.5vw/0.75 Consolas, monospace; }

section {
  font: 400 16px/1.45 Consolas;
  background: gold;
  color: blue;
}

.count::before {
  content: attr(data-before);
}

.count::after {
  content: attr(data-after);
  font-weight: 900;
}

.B {
  font-size: 0;
}

.B::before,
.B::after {
  font-size: 1rem
}

.C::after {
  content: attr(data-mask);
  position: relative;
  left: -3ch;
  z-index: 1;
  font-weight: 900;
}

演示2

注意：此演示是演示 1中第三个示例的更复杂版本

<section class='count A' data-before='0123456' data-after='789'></section>

<section class='count B' data-before='0123456' data-after='789'>0123456789</section>

<section class='count C' data-mask='789'>0123456789</section>

:root,
body {
  font: 100 3.5vw/0.75 Consolas, monospace;
}

.box {
  border: 0;
  margin: 0 auto 50px;
  padding: 0;
  outline: 5px solid tomato;
  max-width: max-content;
  max-height: calc(3.5vw * .75);
  white-space: nowrap;
}

section {
  display: inline-block;
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-width: max-content;
  white-space: nowrap;
  letter-spacing: 0.1ch;
  background: gold;
  color: navy;
}

.D {
  z-index: 1;
}

.E {
  z-index: 0;
  margin-left: -1ch;
  font-weight: 900;
  color: red;
}

.red50-3 {
  max-width: calc(50% - 3ch);
}

.mov50-3 {
  right: calc(50% - 3ch);
}