CSSのホバリングボタンで下線を引く

Question

3つのサービスが連続しています。各サービスのタイトルテキストの上にカーソルを置くと、対応するタイトルの下に下線が長くなります。何をしたいのですか？ボタンまたはタイトルテキストの場合、行が長くなります。私は可能場合CSSのソリューションを好むだろう

、私は（多分誤って）+を試してみましたが、それは私

<div class="row "> 

    <div class="col-xl-3 col-lg-4 "> 

    <em>01</em> 
    <a href=""><h2>Web Design</h2> </a> 
    <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> <a href=""><h2>Print Design</h2></a> 
    <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

はここであなたに よろしく

Answer 1

ありがとうございました溶液でペンです：http://codepen.io/anon/pen/EKMxor。これにはjavascript（JQuery）が含まれていますが、CSSなしでは実行できません。これは50％のハードウェアアクセラレーションです。

HTML：

<div class="row "> 

     <div class="col-xl-3 col-lg-4 "> 

     <em>01</em> 
     <a href=""><h2>Web Design</h2> </a> 
     <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> <a href=""><h2>Print Design</h2></a> 
     <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"); 

});