Как разместить символ "вверху" строки?

Question

Вот пример того, что мне нужно.

Вот пример того, что у меня получается:

.number {
  background: blue;
  line-height: 1;
  font-size: 50px;
}

.dollar {
  background: blue;
  line-height: 1;
  font-size: 25px;
  vertical-align: top;
}

.text {
  background: blue;
  line-height: 1;
  font-size: 17px;
}

<div class="text_wrapper">
  <span class="dollar">$</span>
  <span class="number">50</span>
  <span class="text">per month</span>
</div>

Вопрос: Как сделать так, чтоб верхняя граница $ была на одном уровне с верхней границей 50? Как это отрегулировать, не прибегая к точным пиксельным значениям для свойства line-height?

Answer 1

способ 1: использовать тег sup и немного его скорректировать

div {
  position:   relative;
  font-size: 42px;
}

sup {
  position:   relative;
  top:        2px;
  font-size:  22px;
  margin-right: 2px;
}

<div><sup>$</sup>50</div>

Answer 2

Слишком много тегов. Да и семантически как-то... Всё можно решить без избыточной разметки в документе.

data {
  display: inline-block;
  font-size: .8rem;
  padding: .8rem 2rem
}

data,
mark {
  background: #0000ff;
  color: #fff
}

mark {
  font-size: 4rem
}

mark:before {
  font-size: 2rem;
  content: '\0024';
  vertical-align: super
}

<data class="price" value="50.00"><mark>50</mark> per month</data>

БЛОГ НА HUSL

Как разместить символ "вверху" строки?

Ответы (2 шт):