Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Дмитрий Дмитрий
0 / -1 / 2
Регистрация: 17.09.2016
Сообщений: 344
#1

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

06.02.2018, 12:34. Просмотров 211. Ответов 5
Метки нет (Все метки)

День добрый, подскажите как выровнить текст по нижнему краю в псевдоэлементе :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 тоже придется менять.

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
06.02.2018, 12:34
Ответы с готовыми решениями:

Как выровнять текст в блоке по нижнему краю?
Доброго времени суток! Хочу ввести в блок текст, который превышает блок по...

Выравнивание по нижнему краю
Требуется разместить сообщение по нижнему краю, а оно, почему-то, не...

Выравнивание блока по нижнему краю
Есть два div'a, один в другом. Внутренний необходимо выравнять по нижнему краю...

2 дива в диве к нижнему краю
Доброго времени суток, есть конструкция &lt;div id='kwbot'&gt;&lt;div id='1'...

Как <div> выровнять по нижнему краю?
Для этих целей придумали &quot;vertical-align&quot; но он с дивом не хочет работать...

5
Дмитрий Дмитрий
0 / -1 / 2
Регистрация: 17.09.2016
Сообщений: 344
09.02.2018, 16:13  [ТС] #2
Ни кто не знает, ребят ну как так то
0
Freeze_Breeze
189 / 224 / 86
Регистрация: 12.01.2016
Сообщений: 1,343
10.02.2018, 12:01 #3
Дмитрий Дмитрий, https://webref.ru/css/vertical-align
0
Дмитрий Дмитрий
0 / -1 / 2
Регистрация: 17.09.2016
Сообщений: 344
10.02.2018, 13:23  [ТС] #4
Вы про vertical-align: text-bottom? Ну попробуйте, что получиться
0
Freeze_Breeze
189 / 224 / 86
Регистрация: 12.01.2016
Сообщений: 1,343
11.02.2018, 19:16 #5
Дмитрий Дмитрий, Вы конечно извините меня, но у вас анимация прыгает как сумасшедшая, какой элемент вам нужно выровнять, где он находится, почему вы все сверстали через псевдоэлементы?
0
Дмитрий Дмитрий
0 / -1 / 2
Регистрация: 17.09.2016
Сообщений: 344
12.02.2018, 06:16  [ТС] #6
Вот пример Пример, сделал в строке 70 отступ сверху в процентах padding-top: 25%; вроде работает, но при изменении высоты всё равно получается косяк))
0
12.02.2018, 06:16
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.02.2018, 06:16

Выравнивание блока по нижнему краю таблицы
Нужно выравнять блок с текстом по нижнему краю таблицы. В одной ячейке строки у...

Как выровнять блок по нижнему краю в CSS?
Простейший сайт. Сделал один большой блок maket, внутри него еще 4 блока....

Как выровнять элементы div по нижнему краю
Подскажите, как выровнять элементы div по нижнему краю элемента div, в котором...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru