Надстрочный код только в CSS?

честно говоря, я не вижу смысла делать Надстрочный/подстрочный только в CSS. Для него нет удобного атрибута CSS, просто куча доморощенных реализаций, включая:

.superscript { position: relative; top: -0.5em; font-size: 80%; }

или с помощью вертикального выравнивания или я уверен, что другими способами. Дело в том, что это начинает усложняться:

• CSS Надстрочный интервал на высоту строки;
• остерегайтесь CSS для Надстрочного/Subcript о том, почему вы, возможно, не должны стиль Надстрочный / подстрочный с CSS на всех;

второй момент, который стоит подчеркнуть. Обычно Надстрочный / подстрочный индекс на самом деле не является проблемой стиля, но указывает на смысл.

Примечание: стоит упомянуть об этом список сущностей для общих математических надстрочных и подстрочных выражений хотя этот вопрос не относится к этому.

теги sub/sup находятся в HTML и XHTML. Я просто использовал бы их.

Что касается остальной части вашего CSS, атрибуты: after pseudo-element и content широко не поддерживаются. Если вы действительно не хотите помещать это вручную в HTML, я думаю, что решение на основе Javascript-ваш следующий лучший выбор. С jQuery это так:

$(function() {
  $("a.external").append("<sup>+</sup>");
};

документация CSS содержит стандартный эквивалент CSS для всех HTML-конструкций. То есть: большинство веб-браузеров в наши дни явно не обрабатывают SUB, SUP, B, I и так далее - они (вроде как) преобразуются в SPAN элементы с соответствующими свойствами CSS, и механизм рендеринга занимается только этим.

страница приложение D. таблица стилей по умолчанию для HTML 4

биты, которые вы хотите:

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

Я работал над страницей с целью четкого разборчивого текста, с надстрочными элементами, не меняющими верхние и Нижние поля строки - со следующими наблюдениями:

если для основного текста line-height: 1.5em например, вы должны уменьшить высоту строки надстрочного текста, чтобы он выглядел правильно. Я использовал line-height: 0.5em.

и vertical-align: super хорошо работает в большинстве браузеров, но в IE8, когда у вас есть элемент superscript, остальная часть этой строки опущен вниз. Поэтому вместо этого я использовал vertical-align: baseline вместе с отрицательным top и position: relative для достижения того же эффекта, который, кажется, работает лучше в браузерах.

Итак, чтобы добавить к "доморощенным реализациям":

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

http://htmldog.com/articles/superscript/ по существу:

position: relative;
bottom: 0.5em;
font-size: 0.8em;

хорошо работает на практике, насколько я могу сказать.

следующее взято из внутреннего html Mozilla Firefox.css:

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Итак, в вашем случае это было бы что-то вроде:

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

это еще одно правильное решение:

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

таким образом вы все еще может использовать sup / sub теги, но вы исправлено их идиотское поведение, чтобы всегда испортить высоту строки абзаца.

так что теперь вы можете сделать:

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

и ваша высота строки абзаца не должна быть испорчена.

протестировано на IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

Я тестировал с помощью p {line-height: 1.3;} (это хорошая высота линии, если вы не хотите ваши строки, чтобы придерживаться слишком близко), и он все еще работает, потому что" -0.6 em " такое небольшое количество, что также с этой высотой строки sub/sub текст будет соответствовать и не переходить друг через друга.

забыл деталь, которая может быть актуальной я всегда использую DOCTYPE в 1-я строка моей страницы (в частности, я использую HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). Поэтому я не знаю, хорошо ли это решение работает, когда браузер находится в quirkmode (или не стандартном режиме) из-за отсутствия DOCTYPE или DOCTYPE, который не запускает стандартный/почти стандартный режим.

Если вы изменяете размер шрифта, вы можете остановить сокращение размеров с помощью этого правила:

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}

Я не уверен, что это связано, но я решил свою проблему с ² HTML-объекты, поскольку я не смог добавить какие-либо другие HTML-теги внутри <label> тег. Поэтому идея заключалась в использовании ASCII-кодов вместо css или HTML-тегов.

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

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

посмотреть MDN.

проверить: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

Если похоже, что вы хотите "vertical-align: text-top"

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

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

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

нашел это через элемент Google chrome inspect.