如何使底部边框仅在填充文本下显示

Question

我正在尝试使底部边框仅显示在填充文本下方。

<h1 style="font-size: 32px; color: #060428; font-weight: bold; border-bottom: 4px solid #4ac2c5; display: inline; margin: 50px 0px 0px; padding-left: 30px;"><span style="font-family: verdana,geneva,sans-serif;">Headline</span></h1>

Answer 1

删除padding-left: 30px;

<h1 style="font-size: 32px; color: #060428; font-weight: bold; border-bottom: 4px solid #4ac2c5; display: inline; margin: 50px 0px 0px; "><span style="font-family: verdana,geneva,sans-serif;">Headline</span></h1>

或用边距替换仍将文本“推”到右侧；

<h1 style="font-size: 32px; color: #060428; font-weight: bold; border-bottom: 4px solid #4ac2c5; display: inline; margin: 50px 0px 0px 30px;"><span style="font-family: verdana,geneva,sans-serif;">Headline</span></h1>

Answer 2

将border-bottom样式应用于span。

内联样式通常不是一个好习惯，因此我单独包含了CSS。

h1 {
  font-size: 32px;
  color: #060428;
  font-weight: bold;
  display: inline;
  margin: 50px 0px 0px;
  padding-left: 30px;
}

span {
  font-family: verdana, geneva, sans-serif;
  padding-bottom: 10px;
  border-bottom: 4px solid #4ac2c5;
}

<h1><span>Headline</span></h1>