自定义html标签u，将其设置为比文本更宽

Question

尝试在文本中设置更宽的下划线标记。是否可以使用css加宽下划线？我尝试使用css宽度，但没有发生。

jsbin example

<u>Paragraph</u>

u {
    width: 40px;
}

Answer 1

使用<span>代替<u>。添加一个border-bottom和一些padding，这就是那个。

HTML

<span>Some text</span>

CSS

span {
  border-bottom: 1px solid black;
  padding-right: 40px;
}

<强> Demo