Bottom Border to specific section - html

Question

I have a DIV an inside it is a H1 tag with some description , I'm able to give a border-bottom to the whole H1 tag but how to give a border-bottom to just a particular part of it like in the snippet below.
Adding a SPAN tag works, but after giving padding to the border to add space it spreads wrongly breaking the text format.
HTML :
<div class="row">
<div class="col-md-4 text-center" id="column1">
<h3 class="">
<span>Responsive Web Design </span>
</h3>
<br />
<br />
<p>
Coupling aesthetic design sensibilities with.
</p>
</div>
CSS:
#column1 > h3 > span{
border-bottom: 5px solid #16a085;
padding-bottom: 20px;
}
What am I doing wrong here?

Answer 1

I have used :pseudo elemnt to add a border to the element
/** = for better view not required */
.row {
text-align: center;
display: inline-block;
border: 1px solid red;
}
/** = end */
span {
display: block;
position: relative;
padding: 15px 0;
}
span:after {
content: '';
position: absolute;
width: 30px; /* change as per your design */
height: 2px; /* change as per your design */
background: blue; /* change as per your design */
bottom: 0;
left: 50%;
margin-left: -15px;
}
<div class="row">
<div class="col-md-4 text-center" id="column1">
<h3 class="">
<span>Responsive Web Design </span>
</h3>
<br />
<br />
<p>
Coupling aesthetic design sensibilities with.
</p>
</div>

Answer 2

Remove the <span> and the <br> tags and style the <h1> using css to create the spacing above and below the heading. Then add a pseudo element for the line.
The example I'm showing below uses position: absolute on the pseudo element. To ensure that it positions properly make sure the h1 style has position: relative.
.container {
text-align: center;
}
h1 {
position: relative;
margin: 0 0 25px;
padding: 120px 0 25px;
}
h1::before { /* for the graphic */
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
display: block;
width: 100px;
height: 100px;
background: transparent url(https://cdn3.iconfinder.com/data/icons/communication-3/512/computer_phone_tablet-512.png) left top no-repeat;
background-size: contain;
}
h1::after { /* for the line below the h1 */
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
display: block;
width: 50px;
border-top: 5px solid green;
}
<div class="container">
<h1>Responsive Web Design</h1>
<p>Lorem ipsum dolor sit amet sed umini.Lorem ipsum dolor sit amet sed umini.</p>
</div>

Answer 3

Well, I'm suggesting you to go for the first answer. But if you find this pseudo thing bit confusing, then try the <hr> tag. Give it a fixed width and place it below the title. Simple and clean.
See FIDDLE
#column1 > h3 > span{
padding-bottom: 20px;
}
.text-center hr{
border-bottom: 5px solid #16a085;
width: 50px;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 text-center" id="column1">
<h3 class="">
<span>Responsive Web Design </span>
</h3>
<hr/>
<br />
<br />
<p>
Coupling aesthetic design sensibilities with.
</p>
</div>

Answer 4

Just set the display property to inline-block like so
display: inline-block;
and then it will work