javascript - 如何在文字下画圆弧(HTML5、CSS3、JavaScript)？

Question

如果我有一个以 UTF-8 编码的单词，我如何在它下面画一个弧线？

例如，假设我有一个函数可以完成上述工作:调用它 arc()。现在，arc(ABCD) 应该返回以下示例图像:

虽然对于实际应用来说，如果输出不是图像而是 UTF-8 编码的文本可能是理想的。是否可以使用 HTML、CSS 和/或 JavaScript 来做到这一点？

Answer 1

你可以使用一个 after 元素:

.arc {
  display: inline-block;
  position: relative;
}

.arc:after {
  content: '';
  display: block;
  position: absolute;
  top: calc(100% - 7px);
  left: 0;
  right: 0;
  height:10px;
  border-radius: 50%;
  border-bottom: 2px solid black;
}

<span class="arc">abcd</span>