2

*Использую сетку 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>

1 ответ 1

5

.container-fluid{
  background-color: black;
}

.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;
  display: inline-block;
}

.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>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.