Верхний индекс только в CSS?

Question

Как мне сделать надстрочный текст, только в CSS?

У меня есть таблица стилей, где я помечаю внешние ссылки надстрочным символом, но мне трудно правильно выровнять символ.

То, что у меня сейчас есть, выглядит так:

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

но это не работает.

Естественно, я бы использовал тег <sup>, только если content разрешил бы HTML ...

Answer 1

Свойство CSS font-variant-position находится на рассмотрении и может в конечном итоге стать ответом на этот вопрос. По состоянию на начало 2017 года, только Firefox поддерживает его.

.super {
    font-variant-position: super;
}

См. MDN .

Answer 2

Вот точный способ использования sup:

.superscript{
    vertical-align:super;
    font-size:smaller;
}

Нашел это через элемент проверки Google Chrome.

Answer 3

.superscript {
  position: relative;
  top: 5px;
  font-size: 90%;
  vertical-align: super;
}

Answer 4

Выезд: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

если выглядит так, как вы хотите, "vertical-align: text-top"