Html 使用CSS在每个字符下方添加一个点

我正在寻找一种方法来创建以下效果与CSS

我找到了一些在文本（）下面加点的解决方案，但我不想要“点划线”，我希望每个字符下面都只有一个点。此外，圆点应该随着文本的字体大小而增加（尽管如果需要，我可以用JS来修复）

---

我怎样才能做到这一点呢？

您还不能使用CSS为每个字符的连续文本块设置样式

（正如@Oriol在回答中指出的那样，未来可能会有人支持这一点。我这里只讨论当前的情况。）

您可以根据每个元素设置代码的样式，因此如果将每个字符都包含在单独的元素中（使用

char

class），则可以使用以下方式添加点：

.char {
    display: inline-block;
    position: relative;
}
.char::before {
    content: '.';
    display: inline-block;

    /* position the dot underneath the character */
    position: absolute;
    bottom: -0.5em;
    left: 0;

    /* center the dot horizontally */
    text-align: center;
    width: 100%;

    /* ... (style the dot to your liking) */
}

这将使DOM变得异常混乱，但它可以满足您的要求（按字体大小缩放等）。

定义这些属性：

• 此属性将强调标记应用于元素的文本。[…]
  每个字符绘制一次标记

• 此属性描述在何处绘制强调标记

当浏览器支持这一点时，您将能够使用

文本强调样式：点；
文本强调位置：左下；/*或“右下”*/

正文{
文本强调风格：点；
文本强调位置：左下；
-webkit文本强调样式：点；
-webkit文本强调位置：下；
字体大小：300%；
}

---

ieuw

以上两种解决方案的总结：

1。使用现代CSS在每个字母下方设置一个点

HTML:

结果:

问题：线条高度发生变化

2。对每个字符使用CSS before元素

HTML:

结果:

问题：每个字符都需要放入一个span元素中。但是行的高度不会改变，并且在大多数浏览器中都可以使用

---

感谢hon2a和Oriol提供的有用答案

用点做你自己的字体怎么样？：）您可以创建一个简单的JS代码来将它们拆分为跨距：

$（'#wrap'）.html（“++$（'#wrap'）.html（）.split（“”）。join（“”+“”）

@Martijn这只在

#wrap

仅包含文本节点的情况下起作用。使用各种解决方案将DOM文本拆分为字符是一个单独的练习。我在这里不担心。@Oriol：你说得对，但是写一个100%的解决方案作为一个提示会有点过分：P只是展示这个想法的概念：）真的很漂亮。在日语中，这种风格被广泛使用，被称为“肯顿”(圏点) 或者“bouten”(傍点). 事实上，我相信这就是这个答案中描述的CSS特性的动机。

0,<span class="dotunderletter">1</span> = 
<br>
0,<span class="dotunderletter">01</span> = 
<br>
0,001 = 1 · 1/1.000 = 

.dotunderletter {
    text-emphasis-style: dot;
    text-emphasis-position: under left;
    -webkit-text-emphasis-style: dot;
    -webkit-text-emphasis-position: under;
}

0,<span class="char">1</span> = 
<br>
0,<span class="char">0</span><span class="char">1</span> =
<br>
0,001 = 1 · 1/1.000 = 

.char {
    display: inline-block;
    position: relative;
}
.char::before {
    content: '.';
    display: inline-block;
    position: absolute;
    bottom: -0.5em;
    left: 0;
    text-align: center;
    width: 100%;
}