*Использую сетку Bootsrap 4. При наведении на кнопку, линия подчеркивает весь блок, а нужно подчёркивать только кнопку.
Как сделать это?
.a1,
.a2,
.a3,
.a4,
.a5 {
font-family: 'Paytone One', sans-serif;
letter-spacing: 3px;
color: #ffffff;
font-size: 25px;
cursor: pointer;
background-image: linear-gradient(#FF0D00FF, #FF0D00FF);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size 0.5s;
}
.a1:hover,
.a2:hover,
.a3:hover,
.a4:hover,
.a5:hover {
background-size: 100% 2px;
}
.a1:first-letter,
.a2:first-letter,
.a3:first-letter,
.a4:first-letter,
.a5:first-letter {
color: #FF0D00FF;
}
<div class="container-fluid">
<div class="row underline-menu">
<div class="col-md-3">
<div class="info-header-tab a1"> Home </div>
</div>
<div class="col-md-3">
<div class="info-header-tab a2"> Contacts </div>
</div>
<div class="col-md-3">
<div class="info-header-tab a3"> About Us </div>
</div>
<div class="col-md-3">
<div class="info-header-tab a4"> Your Pocket </div>
</div>
</div>
</div>