Выровнить текст по нижнему краю в псевдоэлементе

@Дмитрий Дмитрий · Регистрация: 17.09.2016

Студворк — интернет-сервис помощи студентам

День добрый, подскажите как выровнить текст по нижнему краю в псевдоэлементе :befor

HTML5
1
2
3
4
5
<div id="wb_indexExtension1">
<button type="button" class="buttonindexExtension1 button--tamaya btn--texthover" data-text="Другой текст">
<span>Текст кнопки</span>
</button>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.button--tamaya::before,
.button--tamaya::after {
    content: attr(data-text);
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    background: #FFD700;
    color: #32CD32;
    border-color: #DC143C
    overflow: hidden;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    overflow: hidden;
}
.button--tamaya::before {
    top: 0;
    padding-top: 1.7em;
}
.button--tamaya::after {
    bottom: 0;
    line-height: 0;
}
.button--tamaya > span {
    display: block;
    -webkit-transform: scale3d(0.2, 0.2, 1);
    transform: scale3d(0.2, 0.2, 1);
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--tamaya:hover::before {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}
.button--tamaya:hover::after {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}
.button--tamaya:hover > span {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

Интересует эта часть кода

CSS
1
2
3
4
.button--tamaya::before {
    top: 0;
    padding-top: 1.7em;
}

padding-top: дело хорошее но если изменить высоту <div id="wb_indexExtension1"> то и значение padding-top тоже придется менять.

@Дмитрий Дмитрий · 09.02.2018, 16:13 **[ТС]**

Ни кто не знает, ребят ну как так то

@Freeze_Breeze · 10.02.2018, 12:01

Дмитрий Дмитрий, https://webref.ru/css/vertical-align

@Дмитрий Дмитрий · 10.02.2018, 13:23 **[ТС]**

Вы про vertical-align: text-bottom? Ну попробуйте, что получиться

@Freeze_Breeze · 11.02.2018, 19:16

Дмитрий Дмитрий, Вы конечно извините меня, но у вас анимация прыгает как сумасшедшая, какой элемент вам нужно выровнять, где он находится, почему вы все сверстали через псевдоэлементы?

@Дмитрий Дмитрий · 12.02.2018, 06:16 **[ТС]**

Вот пример Пример, сделал в строке 70 отступ сверху в процентах padding-top: 25%; вроде работает, но при изменении высоты всё равно получается косяк))

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	09.02.2018, 16:13 [ТС]
	Ни кто не знает, ребят ну как так то 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	10.02.2018, 12:01
	Дмитрий Дмитрий, https://webref.ru/css/vertical-align 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	10.02.2018, 13:23 [ТС]
	Вы про `vertical-align: text-bottom`? Ну попробуйте, что получиться 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	11.02.2018, 19:16
	Дмитрий Дмитрий, Вы конечно извините меня, но у вас анимация прыгает как сумасшедшая, какой элемент вам нужно выровнять, где он находится, почему вы все сверстали через псевдоэлементы? 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	12.02.2018, 06:16 [ТС]
	Вот пример Пример, сделал в строке 70 отступ сверху в процентах padding-top: 25%; вроде работает, но при изменении высоты всё равно получается косяк)) 0