Extend underline by hovering button in css - button

Question

I have 3 services in a row, If you hover over each services title text, the underline gets longer under the corresponding title, What I want to do is make it so when you hover over the button or the title text, the line gets longer.
I would prefer a css solution if possible, I have tried the + (maybe wrongly) but it does not seem to be working for me
<div class="row ">
<div class="col-xl-3 col-lg-4 ">
<em>01</em>
<h2>Web Design</h2>
<p>Acro Design create research led websites that make you and your business money</p>
<button>Explore Web Design</button>
</div>
<div class="col-xl-3 col-lg-4 ">
<em>02</em>
<a href="">
<h2>Branding </h2>
</a>
<p>To make a business money though design you need to firstly understand how a user uses design.</p><button>Explore Branding</button></div>
<div class="col-xl-3 col-lg-4 "><em>03</em> <h2>Print Design</h2>
<p>Print design is about creating assets for your business, to increase your overall industry presence.</p><button class="but">Explore Print Design</button></div>
</div>
button {
margin: 1rem 0 7rem 0;
padding: 1.3rem;
font-size: 1.2rem;
font-style: italic;
background-color: transparent;
border: #000 solid 0.2rem;
color: #000
}
p {
padding: 1rem 1rem 0rem 0;
}
em {
display: block
}
h2 {
text-decoration: none;
display: inline-block;
border-bottom: 3px solid black;
white-space: nowrap;
width: 6.429rem;
transition: 0.5s ease;
height: 5.357rem;
color: #000;
}
h2:hover {
border-bottom: 3px solid black;
width: 200px;
text-decoration: none;
}
}
http://codepen.io/saltedm8/pen/oxVNjO
Thank you
REGARDS

Answer 1

Here is a pen with solution : http://codepen.io/anon/pen/EKMxor. This includes javascript ( JQuery ) but there is no way to do it without css only.. You could say this is 50% hardware accelerated.
HTML:
<div class="row ">
<div class="col-xl-3 col-lg-4 ">
<em>01</em>
<h2>Web Design</h2>
<p>Acro Design create research led websites that make you and your business money</p>
<button>Explore Web Design</button>
</div>
<div class="col-xl-3 col-lg-4 ">
<em>02</em>
<a href="">
<h2>Branding </h2>
</a>
<p>To make a business money though design you need to firstly understand how a user uses design.</p><button>Explore Branding</button></div>
<div class="col-xl-3 col-lg-4 "><em>03</em> <h2>Print Design</h2>
<p>Print design is about creating assets for your business, to increase your overall industry presence.</p><button class="but">Explore Print Design</button></div>
</div>
</div>
</section>
CSS:
p {
padding: 1rem 1rem 0rem 0;
}
button {
margin: 1rem 0 7rem 0;
padding: 1.3rem;
font-size: 1.2rem;
font-style: italic;
background-color: transparent;
border: #000 solid 0.2rem;
color: #000
}
em {
display: block
}
h2 {
text-decoration: none;
display: inline-block;
border-bottom: 3px solid black;
white-space: nowrap;
width: 6.429rem;
transition: 0.5s ease;
height: 5.357rem;
color: #000;
}
h2.active{
border-bottom: 3px solid black;
width: 200px;
text-decoration: none;
}
JS :
$("h2").mouseover(function() {
$(this).addClass("active");
});
$("h2").mouseout(function() {
$(this).removeClass("active");
});
$("button").mouseover(function(){
$(this).parent().children("a").children("h2").addClass("active");
});
$("button").mouseout(function(){
$(this).parent().children("a").children("h2").removeClass("active");
});