只在CSS上标?

我怎么能得到上标做，只有在CSS?

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

我目前拥有的是这样的:

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

但这并不奏效。

自然地，我将使用__abc0标记，只有当content允许HTML…

351531 次浏览
小开

老实说，我不认为在CSS中只做上标/下标有什么意义。它没有方便的CSS属性，只有一堆本地实现，包括:

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

或者使用垂直对齐或者其他方式。问题是，事情开始变得复杂了:

第二点值得强调。通常，上标/下标实际上不是样式问题，而是表示意义。

注:值得一提的是这个常用数学上标和下标表达式的实体列表，尽管这个问题与它无关。

sub/sup标记在HTML和XHTML中。我会用这些。

至于CSS的其他部分，伪元素和内容属性的:after并没有得到广泛支持。如果你真的不想把这个手动放在HTML中，我认为基于javascript的解决方案是你的下一个最佳选择。使用jQuery，这是简单的:

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

检查:http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

如果你想要"vertical-align:text-top"

小开
最佳答案

你可以用< >强vertical-align: super < / >强做上标(加上附带的font-size简化)。

但是，一定要在这里阅读其他答案，特别是paulmurray和克里特斯的那些，以获得有用的信息。

小开

http://htmldog.com/articles/superscript/本质上:

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

据我所知，在实践中效果很好。

小开

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 }
小开

我在一个页面上工作，目的是有清晰易读的文本，上标元素不改变行顶部和底部的空白-以下是观察结果:

例如，如果你的主文本有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;
}
小开

这是另一个干净的解决方案:

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.6em”是如此小的数量，而且有了这个行高，sub/sub文本将适合并且不会互相重叠。

忘记了一个可能相关的细节，我总是在页面的第一行中使用DOCTYPE(特别是我使用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;}
小开 
.superscript {
position: relative;
top: 5px;
font-size: 90%;
vertical-align: super;
}
小开

sup的用法如下:

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

发现这通过谷歌铬检查元素。

小开

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

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

所以，在你的情况下，它会是这样的:

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

我不确定这是否相关，但我已经解决了我与&sup2; HTML实体的问题，因为我无法在<label>标记中添加任何其他HTML标记。所以这个想法是使用ASCII码而不是css或HTML标签。

小开

CSS属性font-variant-position正在考虑中，最终可能是这个问题的答案。不过，截至2017年初，只有Firefox支持它。

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

看到中数。

小开

相关或不相关，使用上标作为HTML元素或在文本中作为span+css可能会导致本地化程序中的本地化问题。

例如，我们输入"3理查德·道金斯 party software":

3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software

译者如何翻译“rd”?他们可以为一些西里尔语言留空，但其他外来语言或RTL语言呢?

在这种情况下，最好避免使用上标，并使用完整的措辞，如“第三方软件”。 或者，正如这里在其他评论中提到的，通过jQuery在上标中添加加号
小开

试一试

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

或者简单的“after”;

.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;
}

它应该类似于下面带有上标的示例链接

<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup></p>

或

<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>You got this</aftersup></p>

或

<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup>

或

<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only<aftersup>You got this</aftersup>

就像在……

只在CSS上标? +

或

你懂的


提交答案