CSS 中只能使用上标吗？

Question

我如何在CSS中实现上标？

我有一个样式表，其中我使用上标字符标记外部链接，但我很难使字符正确对齐。

目前我的实现效果如下：

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

但它不起作用。

当然，如果content允许使用HTML，我将使用<sup>标签...

- wolfie

---

“vertical-align:text-top”在IE9中对我无效。但是，在FireFox 4.0中有效。至少在WordPress上下文中是这样的。 - JosefB

如果content允许HTML，那么关注点分离将会受到影响。 - Eva

如果有其他人也在想... "关注点分离（SoC）是一种设计原则，将计算机程序分成不同的部分，以便每个部分都处理不同的关注点。关注点是一组影响计算机程序代码的信息。"（来源：https://en.wikipedia.org/wiki/Separation_of_concerns） - ashleedawg

Answer 1

你可以通过使用 vertical-align: super （加上一个相应的font-size减小）来创建上标。

但是，一定要仔细阅读其他回答，特别是由paulmurray和cletus提供的有用信息。

- Peter Boughton

---

此外，必须减小字体大小以实现实际的上标效果。 - Nirmal

@paulmurray的回答更准确和全面。在我看来，这应该是被接受的答案。 - Doug Paul

当有三种不同的回答顺序时，说“下面”并不能帮助什么。你是对的，Paul的回答确实更好，令人惊讶的是它获得了五倍于其他回答的投票数。 - Peter Boughton

Answer 2

说实话，我不认为仅使用CSS来进行上标/下标的操作有什么意义。 CSS中没有方便的属性可以用来实现这一点，只能使用一些自定义的实现方式，例如：

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

或者使用垂直对齐或其他方式。问题在于，它开始变得复杂：

• CSS上标间距和行高；
• 当心使用CSS来设置上标/下标为什么你不应该完全使用CSS样式化上标/下标;

第二点值得强调。通常，上标/下标实际上并不是一种样式问题，而是具有特定的含义。

顺便提一下：值得一提的是这个常见数学上标和下标表达式的实体列表，即使这个问题与此无关。

HTML和XHTML中都有sub / sup标签，我建议只使用这些标签。

至于您的CSS的其余部分，:after伪元素和content属性的支持并不广泛。如果您真的不想在HTML中手动输入此内容，则认为基于JavaScript的解决方案是您的下一个最佳选择。 使用jQuery这很简单：

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

- cletus

---

“not widely supported”指的是“在IE中不被支持”，我想这是你的意思吧？ - Boldewyn

不支持IE7及以下版本或在兼容模式下的IE8。 - cletus

“这与我所说的非常相符，是的。” - Boldewyn

一开始使用了 @PeterBoughton 的被接受的解决方案，但最终选择了这个，因为它不会扭曲行高。 - Nuri Hodges

也许你看不到重点，因为你不知道需求和上下文。我有一个系统，它把<sup>包装成了<span class="superscript"></span>，在CSS中实现会比重写整个系统更容易。换句话说，我想表达的是，无论在CSS中还是在HTML中进行上标处理是否合理超出了问题的范畴。 - Rolf

Answer 3

CSS文档包含所有HTML结构的行业标准CSS等效内容。也就是说，大多数现代Web浏览器不会显式处理SUB，SUP，B，I 等元素 - 它们（有点儿）被转换为具有适当CSS属性的SPAN元素，渲染引擎则只处理它们。

页面位于附录D. HTML 4的默认样式表中。

你需要的部分如下：

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

- paulmurray

---

这个方法可以使用，但会影响行高line-height。我认为，不影响line-height的唯一方法是使用position:relative，就像cletus建议的那样：https://dev59.com/u3RB5IYBdhLWcg3wz6ad#501689 - Marco Demaio

以下代码似乎可以解决问题: sub { vertical-align: sub; line-height: 1.0; }用于下标，sup { vertical-align: super; line-height: 1.0; }用于上标。不需要担心定位问题。 - Jordan Clark

Answer 4

我正在制作一个页面，希望文本清晰易读，并且设置上标元素后不改变行的上下边距 - 根据以下观察结果：

如果您的主要文本设置为例如 line-height: 1.5em，则应该减小上标文本的行高以使其正确显示。我使用了 line-height: 0.5em。

此外，在大多数浏览器中，vertical-align: super 的效果很好，但在 IE8 中，如果存在上标元素，则该行剩余部分会被向下推。因此，我使用了 vertical-align: baseline 与负的 top 和 position: relative 来实现相同的效果，这似乎在各种浏览器中效果更好。

所以，进一步完善“自制实现”：

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

- Lessan Vaezi

---

此文本在放置在 div 容器中时会被截断。 - Alex G

Answer 5

下面的内容摘自 Mozilla Firefox 内部的 html.css：

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

所以，在您的情况下，它会是这样的：

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

- Christian Stadler

---

但是默认的SUP元素不能正确地垂直对齐TM符号。 - David Spector

Answer 6

基本上：

http://htmldog.com/articles/superscript/

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

据我所知，实践证明效果良好。

- Nick Presta

---

我在网页中使用这个来显示商标符号。一旦调整了两个常量以适应所使用的字体，它就可以很好地工作。我使用带有负偏移量的顶部而不是带有正偏移量的底部，因为商标符号与前一个字符的顶部对齐。 - David Spector

Answer 7

这是另一个简洁的解决方案：

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 */

这样，您仍然可以使用上标/下标标记，但是您解决了它们常常破坏段落行高的麻烦行为。

所以现在您可以这样做：

  <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.6em"是一个很小的量，即使使用该行高，上下标文本也会适合并且不会重叠。

忘记了一个可能相关的细节，我总是在页面的第一行使用DOCTYPE（具体来说，我使用HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">）。因此，我不知道当浏览器处于quirk模式（或非标准模式）时，由于缺少DOCTYPE或不触发标准/准标准模式的DOCTYPE而导致该解决方案是否有效。

- Marco Demaio

---

尽管这个答案已经十年了，但它仍然是正确的方法。position:relative;可以防止浏览器搞乱所有段落的line-height分配。这种默认行为非常奇怪，让我觉得它是HTML渲染模型中的一个错误。 - serraosays

Answer 8

如果您正在更改字体大小，您可能希望停止使用此规则缩小字体大小：

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

- freexe

Answer 9

CSS属性font-variant-position正在考虑中，可能最终成为解决此问题的答案。截至2017年初，只有Firefox支持它。

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

请查看MDN。

- hashchange

---

现在是2020年春季，除了Firefox浏览器之外，其他浏览器仍不支持它。唉，这样啊... - Jens

Answer 10

尝试

.aftersup {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

或者简单地说是“之后”。

.after {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

"

.a.external:after"可以简化

或者

.after {
 font-size: 50%;
 margin: left;
 vertical-align: .7em;
}

使用“字体大小50％” - 50％是什么大小？如果未在定义文本大小的标签之前使用，则可能无法正常工作。

如果使用“font-size：1em;”，则字体大小肯定已设置，无需引用定义链接文本大小的标签，除非将链接文本设置为100％并且上标是该100％的50％。

使用“font-size：1em;”实际上设置了字体大小基线。

如果希望上标字体比链接文本小，请将“vertical-align”大小设置为较小。

如果希望上标字体与链接文本相同大小，请将“vertical-align”大小设置为与字体大小相同。

要与链接文本对齐，需要将“margin”设置为与链接文本相同（左、中、右、两端对齐）。

.text {
  font-size: 1em;
  margin: left;
}
.aftersup {
  font-size: 1em;
  margin: left;
  vertical-align: .7em;
}

应该是类似以下带上标记的链接示例：^superscript。

<p class="text"><a href="url">https://dev59.com/u3RB5IYBdhLWcg3wz6ad</a><aftersup>+</aftersup></p>

或者

<p class="text"><a href="url">https://dev59.com/u3RB5IYBdhLWcg3wz6ad</a><aftersup>You got this</aftersup></p>

或者

<a href="url">https://dev59.com/u3RB5IYBdhLWcg3wz6ad</a><aftersup>+</aftersup>

或者

<a href="url">https://dev59.com/u3RB5IYBdhLWcg3wz6ad<aftersup>You got this</aftersup>

就像......

如何在CSS中制作上标？+

或者

如何在CSS中制作上标？你成功了

- Creative Arts9