0

Мне необходимо, чтоб расстояние от нижней границы x-height было 32рх, а длина самого подчеркивания - 66рх. Как лучше всего такое выполнить?

введите сюда описание изображения

Заранее спасибо:)

3 ответа 3

3

По умолчанию для .wrapper__item::before width: 100% от ширины родителя + transform: scaleX(0) - cжатие до 0% от исходного размера.
при наведении на .wrapper__item меняется его ::before, т.е. .wrapper__item:hover::before и задаётся это:

transform: scaleX(0.3);

Палочка при наведении сжимается до 30% от своих исходных размеров, которые заданы в width: 100%

Зачем здесь используется transform, а не просто width? Дело в том, что браузеру легче анимировать свойство transform, которое создано для анимаций и почти все браузеры это знают

@import url('https://fonts.googleapis.com/css2?family=Ranchers&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color: black;
}

body {
  font-family: 'Ranchers';
  font-size: 50px;
}

a {
  display: inline-block;
  outline: none;
  text-decoration: none;
  color: var(--color);
  cursor: pointer;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper .wrapper__item + .wrapper__item {
  margin-left: 20px;
}

.wrapper__item {
  position: relative;
}

.wrapper__item::before {
  content: '';
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color);
  transform-origin: center bottom;
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transform: scaleX(0);
}

.wrapper__item:hover::before {
  transform: scaleX(0.3);
}
<nav class="wrapper">
  <a class="wrapper__item">btn 1</a>
  <a class="wrapper__item">btn 2</a>
  <a class="wrapper__item">btn 3</a>
  <a class="wrapper__item">btn 4</a>
</nav>

2

Не знаю. Если это то, что нужно, то вот. По ховеру отображается :)

.a {
  position: relative;
  width: 282px;
  height: 67px;
  font-weight: 700;
  font-size: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.a::before {
  opacity: 0;
  content: "";
  width: 66px;
  height: 4px;
  background-color: red;
  position: absolute;
  top: 99px;
  left: 50%;
  transform: translate(-50%, 0px);
  transition: all .35s;
}

.a:hover::before {
  opacity: 1;
}
<div class="a">SSbl/\KA</div>

0

Вариант с использованием background

.effect {
  display: inline-block;
  padding-bottom: 32px;
  --width: 66px;
  --height: 3px;
  --color: #000;
  background: linear-gradient(to right, 
    transparent calc(50% - var(--width) / 2),
    var(--color) calc(50% - var(--width) / 2),
    var(--color) calc(50% + var(--width) / 2),
    transparent calc(50% + var(--width) / 2)) no-repeat center bottom / 100% var(--height);
  font-size: 500%;
  font-weight: black;
}
<div class="effect">HOVER</div>

Ваш ответ

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

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