html - 如何在 css/html 中形成两个字符的符号？

Question

我想要两个将两个字符放在一起并将其用作可扩展的单个符号。 我正在寻找执行此操作的通用方法。

例如，我想将中间的点和 O 组合起来，得到 O 内部的一个点。 (我知道这有一个字符，但这是一个例子)。

MWE:

Desired result: &#664; <span style="font-size:200%">&#664;</span>

<div style="padding:20px">
  <span style="letter-spacing:-3px">&#183;O</span>
  <span style="font-size:200%; letter-spacing:-3px">&#183;O</span>
  <br>
  <span style="letter-spacing:-6px">&#183;O</span>
  <span style="font-size:200%; letter-spacing:-6px">&#183;O</span>
  <br>
  <span style="letter-spacing:-9px">&#183;O</span>
  <span style="font-size:200%; letter-spacing:-9px">&#183;O</span>
  <br>
  <span style="letter-spacing:-12px">&#183;O</span>
  <span style="font-size:200%; letter-spacing:-12px">&#183;O</span>
  <br>
  <span style="letter-spacing:-15px">&#183;O</span>
  <span style="font-size:200%; letter-spacing:-15px">&#183;O</span>
  <br>
  <span style="letter-spacing:-18px">&#183;O</span>
  <span style="font-size:200%; letter-spacing:-18px">&#183;O</span>
  <br>
  <span style="letter-spacing:-21px">&#183;O</span>
  <span style="font-size:200%; letter-spacing:-21px">&#183;O</span>
</div>

Answer 1

HTML:

<span class="the-char">O</span>

CSS:

.the-char{
  position: relative;
}

.the-char::after{
  content: ".";
  line-height: 100%;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top:50%;
  transform: translateY(-75%);
  text-align: center;
}

/* change the font size to see result */
.the-char,
.the-char::after{
  font-size: 24px;
}

您可以更改主字符上的字体大小，::after 它将按比例缩放。

注意:点“.” char 未居中对齐，因此如果您想将其居中放置在主 char 中，则必须对 top 和 translateY 进行一些调整。