Мне необходимо, чтоб расстояние от нижней границы x-height
было 32рх
, а длина самого подчеркивания - 66рх
. Как лучше всего такое выполнить?
Заранее спасибо:)
По умолчанию для .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>
Не знаю. Если это то, что нужно, то вот. По ховеру отображается :)
.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>
Вариант с использованием 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>