CSS 添加上标(用CSS伪类解决js无法赋值实现诸如单位平方的2上标)

 有些时候我们需要通过javascript给某个对象（比如elementUI表格列标题）赋值，这时无法按写像HTML代码一样直接用<sup>实现上标等效果，类似这种情况其实我们可以利用CSS伪类来实现我们的目的。

 

添加上标有两种方式：（关于“伪类”的教程）

 

一、添加上标元素

1、使用<sup>元素
      1.1、HTML代码：

<span>好好学习，天天向上<sup>热</sup></span>

      1.2、CSS代码：
            无需CSS代码。
      1.3、效果图：

2、使用样式vertical-align属性值super
      2.1、HTML代码：    

<span>好好学习，天天向上<span class="hot">热</span></span>

      2.2、CSS代码：
            .hot{vertical-align:super}
      2.3、效果图：

二、使用after伪类实现

HTML代码：

<div id="hotTxt"><span hotTag="热">好好学习，天天向上</span></div>

CSS代码：

#hotTxt span:after{position: relative; top: -4px; content: attr(hotTag);}

效果图：

参考：CSS参考手册