1.在咱们夏天天气炎热的时候,咱们总会感叹天气的极其,那么咱们又如何在页面上表白这种对天气炎热的埋怨感呢,例如:

2.那咱们该怎么样去显示出这种成果呢?

A.应用菊花字符488
Ǩ
行代码:

<h2>今&#x488;天&#x488;真&#x488;是&#x488;热&#x488;死&#x488;了&#x488;</h2>

B.通过伪元素生成:
首先要把文字拆分开来,如何包裹上一个个<span></span>标签

[...'明天真是热死了'].map(el=>`<span>${el}</span>`).join('')  span::after{content:'\488'}

这样子下来,页面当中就不会有特殊字符了,对搜索引擎也更敌对了

C.通过文本装璜生成
应用text-emphasis,其大小为原文本字体大小的1/2,将来不影响原题目的大小,能够利用伪元素生成一份雷同的文案,具体做法如下:
<p title="明天真是热死了">明天真是热死了</p>

文本装饰业放在伪元素上,并且设置相对定位

p::before{    position: absolute;    content:attr(title);    text-emphasis: '\488';}

而后放大字体,放大两倍:

  p::before{      position: absolute;      content:attr(title);      text-emphasis: '\488';      font-size: 200%;  }

示意图变成这样子了:

当初会发现文字太大,而后字符间距加大了,所以要放大字符间距,能够用letter-spacing实现

 p::before{      position: absolute;      content:attr(title);      text-emphasis: '\488';      font-size: 200%;      letter-spacing: -0.5em;  }

示意图:

最初要将多余的文本暗藏起来:

-webkit-text-fill-color:transparent;
  p::before{      position: absolute;      content:attr(title);      text-emphasis: '\488';      font-size: 200%;      letter-spacing: -0.5em;      -webkit-text-fill-color:transparent;  }

最初示意图: