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