Можно ли стилизовать подстроку в CSS?

Question

Я хочу выделить последние 3 символа строки, например:

123456 789

Легко обернуть последние три с помощью <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

Answer 2

Просто сумасшедшая идея, которая на самом деле делает дисплей немного неправильным.

Просто опубликуйте его, чтобы дать кому-то еще идеи по его улучшению.

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

Answer 3

::before и ::after Псевдоэлементы {content: attr()} Значения

Демонстрация 1

1. Использование псевдоэлементов ::before и ::after
2. Добавьте data-before="0123456" и data-after="789" к элементу
3. Установите псевдоэлементы с помощью content: attr(data-before) и content: 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

Примечание: Есть два примера: один без текстового содержимого и два с текстовым содержимым.

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;
}

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

---

Демонстрация 2

Примечание: Эта демонстрация является более сложной версией третьего примера в Демо 1

: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);
}

<article class='box'>
  <section class='D red50-3'>0123456789</section>
  <section class='E mov50-3'>0123456789</section>
</article>