只有CSS的上标？

最新推荐文章于 2024-11-04 07:45:03 发布

xfxf996

最新推荐文章于 2024-11-04 07:45:03 发布

阅读量107

点赞数

文章标签： css

原文链接：https://oldbug.net/q/26VT/Superscript-in-CSS-only

版权

本文翻译自：Superscript in CSS only?

How can I get superscript done, only in CSS? 我怎样才能在CSS中完成上标？

I have a stylesheet where I mark the external links with a superscript character, but I'm having a hard time getting the character aligned correctly. 我有一个样式表，我用上标字符标记外部链接，但我很难正确对齐字符。

What I have currently, looks like this: 我目前的情况如下：

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

but it doesn't work. 但它不起作用。

Naturally, I'd use the <sup> -tag, only if content would allow for HTML... 当然，我只使用content允许HTML来使用<sup> -tag ...

#1楼

参考：https://stackoom.com/question/26VT/只有CSS的上标

#2楼

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

#3楼

I was working on a page with the aim of having clearly legible text, with superscript elements NOT changing the line's top and bottom margins - with the following observations: 我正在编写一个页面，目的是清晰易读文本，上标元素不改变行的顶部和底部边距 - 具有以下观察结果：

If for your main text you have line-height: 1.5em for example, you should reduce the line-height of your superscript text for it to appear correctly. 如果你的主文本你有line-height: 1.5em ，你应该减少你的上标文本的行高，使它正确显示。 I used line-height: 0.5em . 我使用了line-height: 0.5em 。

Also, vertical-align: super works well in most browsers but in IE8 when you have a superscript element present, the rest of that line is pushed down. 此外， vertical-align: super在大多数浏览器中运行良好，但在IE8中，当你有一个上标元素时，该行的其余部分被推下。 So instead I used vertical-align: baseline together with a negative top and position: relative to achieve the same effect, which seems to work better across browsers. 所以我使用了vertical-align: baseline和一个负top和position: relative对于实现相同的效果，这似乎在浏览器中更好。

So, to add to the "homegrown implementations": 所以，要添加到“自行开发的实现”：

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

#4楼

Here's the exact way sup uses: 这是sup使用的确切方式：

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

Found this via google chrome inspect element. 通过谷歌chrome检查元素找到这个。

#5楼

The following is taken from Mozilla Firefox's internal html.css: 以下内容取自Mozilla Firefox的内部html.css：

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

So, in your case it would be something, like: 所以，在你的情况下，这将是一些东西，如：

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

#6楼

I am not sure if this is related but I have solved my problem with ² 我不确定这是否相关，但我用²解决了我的问题² HTML entities as I wasn't able to add any other html tags inside a <label> tag. HTML实体，因为我无法在<label>标记内添加任何其他html标记。 So the idea was using ASCII codes instead of css or HTML tags. 所以这个想法是使用ASCII代码而不是css或HTML标签。