Saran Saran - 3 months ago 18
CSS Question

How to draw line below heading to the heading size with padding

I want to put an line below the heading to the heading size, if i use border-bottom then there will be no space between the line and the heading. so i need some other solutions.
Style need to be like this

h2 {
color: #0085c3;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 33px;
font-weight: 600;
line-height: 30px;
margin: 40px auto 25px;
text-align: center;
}
h2::after {
background: #000;
display: block;
height: 2px;
width: 50px;
}

Answer

You used the border-bottom which is good, now you can use padding-bottom to add space. Something like this:

h2 {
  color: #0085c3;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 33px;
  font-weight: 600;
  line-height: 30px;
  margin: 40px auto 25px;
  text-align: center;
}
h2 span {
  border-bottom: 1px solid #0085c3;
  padding-bottom: 10px;
}
<h2><span>ADVERTISING</span></h2>