How to get bottom border to only display under padded text

user_11719189 0
Viewed 38

I'm trying to get the bottom border to only display under the padded text.

enter image description here

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

css html
2 Answers

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

Or replace with margin to still 'push' the text to the right;

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

user_56255470

Apply the border-bottom style to span instead.

Inline styles generally aren't good practice so I've included the CSS separately.

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>

user_57987980
Related