0

.cat_fasads {
  background-color: #202020;  
  width: 400px;
  text-align: center;
  padding-bottom: 35px;
}

.cat_img {
  margin: 35px;
  width: 300px;
  height: 223px;
}

.cat_name {
  text-decoration: none;
  color: #fff;
}

.cat_name:after {
  display: block; /*превращаем его в блочный элемент*/
  content: ""; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/
  height: 4px; /*задаём высоту линии*/
  width: 0%; /*задаём начальную ширину элемента (линии)*/
  background-color: #D6BA8C; /*цвет фона элемента*/
}

.cat_name:hover:after,
.cat_name:focus:after {
width: 400px;
}
.cat_name:hover{
color:#D6BA8C;

} 

.cat_name:hover {
  color:#D6BA8C;
  width: 100%;
}
    <div class="categories">
      <div class="desct_left">
        <a class="cat_name" href="#">
          <div class="cat_fasads">
            <img class="cat_img" src="../bootstrap/img/bravo-300x223.png" alt="Фрезеровка Браво">
            Фасад "Браво"
          </div>
        </a>
      </div>
      <div class="desct_center">
        <a class="cat_name" href="#">
          <div class="cat_fasads">
            <img class="cat_img" src="../bootstrap/img/standart-300x223.png" alt="Серия Стандарт">
            Серия "Стандарт"
          </div>
        </a>
      </div>
      <div class="desct_right">      
        <a class="cat_name" href="#">
          <div class="cat_fasads">
            <img class="cat_img" src="../bootstrap/img/optima-300x223.png" alt="Серия Оптима">
            Фасад "Оптима"
          </div>
        </a>
      </div>
    </div>

Получается между блоками появляется промежуток для подчеркивания, как его убрать? чтобы подчеркивание было внутри блока?

1 ответ 1

0

Добавим для .cat_name position: relative;, а для .cat_name:after position: absolute; и bottom: 0;.

.cat_fasads {
  background-color: #202020;  
  width: 400px;
  text-align: center;
  padding-bottom: 35px;
}

.cat_img {
  margin: 35px;
  width: 300px;
  height: 223px;
}

.cat_name {
  text-decoration: none;
  color: #fff;
  position: relative;
}

.cat_name:after {
  position: absolute;
  display: block; /*превращаем его в блочный элемент*/
  content: ""; /*контента в данном блоке не будет поэтому в кавычках ничего не ставим*/
  height: 4px; /*задаём высоту линии*/
  width: 0%; /*задаём начальную ширину элемента (линии)*/
  background-color: #D6BA8C; /*цвет фона элемента*/
  bottom: 0;
}

.cat_name:hover:after,
.cat_name:focus:after {
width: 400px;
}
.cat_name:hover{
color:#D6BA8C;

} 

.cat_name:hover {
  color:#D6BA8C;
  width: 100%;
}
<div class="categories">
      <div class="desct_left">
        <a class="cat_name" href="#">
          <div class="cat_fasads">
            <img class="cat_img" src="../bootstrap/img/bravo-300x223.png" alt="Фрезеровка Браво">
            Фасад "Браво"
          </div>
        </a>
      </div>
      <div class="desct_center">
        <a class="cat_name" href="#">
          <div class="cat_fasads">
            <img class="cat_img" src="../bootstrap/img/standart-300x223.png" alt="Серия Стандарт">
            Серия "Стандарт"
          </div>
        </a>
      </div>
      <div class="desct_right">      
        <a class="cat_name" href="#">
          <div class="cat_fasads">
            <img class="cat_img" src="../bootstrap/img/optima-300x223.png" alt="Серия Оптима">
            Фасад "Оптима"
          </div>
        </a>
      </div>
    </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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