Задать вопрос
@Horain
Начинающий верстальщик

Как верстать подобный текст в карточках правильно?

60ef028722868122286717.png
  • Вопрос задан
  • 126 просмотров
Подписаться 2 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
@Glao
Можно воспользоваться псевдоэлементами:

https://codepen.io/wutwutwut/pen/WNjpbXb
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
firedragon
@firedragon
Не джун-мидл-сеньор, а трус-балбес-бывалый.
Ответ написан
Комментировать
Можно как то так, поиграйте только с top и margin, ну и соответственно задайте размеры для шрифтов

<div class="price">
    <sup>$</sup> 00 <sub>per month</sub>
</div>

.price {
	display: flex; align-items: baseline; justify-content: center;
}
.price sup {
	position: relative; top: -10px; margin-right: 2px;
}
.price sub {
	position: relative; top: -2px; margin-left: 5px;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы