如何在单词下绘制弧（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>