对于这种方法，您需要提前知道两个字符中哪个更宽。
将该字符放入span中。
然后将另一个字符作为before伪元素的内容，方法是从span中的一个属性中提取它，相对于其所有者span绝对定位，并使用左50%居中，然后使用translate将其摆动回其自身宽度的一半。
这样就不需要事先知道各个字符的相对宽度。

.doubleup{
  position: relative;
  
}

.doubleup::before {
  position: absolute;
  content: attr(otherch);
  left: 50%;
  transform: translateX(-50%);
}

个字符

我能想到的最好的办法是：

div {
  font-size: 60px;
}

.overstrike {
  letter-spacing: -1ch;
}

.overstrike::after {
  display: inline-block;
  content: ' ';
  width: 1ch;
}

个字符
我使用CSS的一些特殊功能，如the ch unit和::after。
请注意，覆盖的顺序很重要：最宽的字母应该是跨度中的第二个字符。

首先，在Unicode Plus上查找您的角色。如果找不到该字符，则意味着它未包含在Unicode中。
然后，如果没有你需要的Unicode字符，试着在互联网上的某个地方找到该字符的SVG。然后，您可以在HTML文档中使用SVG：

<img src="./path/to/image.svg" alt="put a simlar unicode character here" />

字符串

要在HTML/CSS中实现自动居中的覆盖字符，而不使用等宽字体，您可以利用CSS伪元素来处理定位。通过使用：before伪元素，您可以将第二个字符放置在第一个字符上，然后应用position：以确保正确定位。以下是您的操作方法：

<div class="overstrike">pw</div>

字符串
若要使用此方法，请将第二个字符动态设置为.overstrike元素的data-second-char属性。如果要动态生成内容，可以使用JavaScript或服务器端脚本来实现这一点。例如，在JavaScript中：

<div class="overstrike" data-second-char="w">p</div>
    
    
    .overstrike {
      position: relative;
    }
    
    .overstrike:before {
      content: attr(data-second-char);
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      letter-spacing: -Xpt; /* Adjust this value to control the distance between characters */
    }

型