Как получить нижнюю границу для отображения только под дополненным текстом

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

Вместо этого применяйте стиль 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>

Answer 2

Удалить 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>

Или замените с полем на 'pu sh' текст справа;

<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>