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

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

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

一、添加上标元素

1、使用元素
1.1、HTML代码：
好好学习，天天向上热
1.2、CSS代码：
无需CSS代码。
1.3、效果图：

2、使用样式vertical-align属性值super
2.1、HTML代码：
好好学习，天天向上热
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参考手册

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

html css hover事件,用:hover伪类代替js的hover事件_html/css_WEB-ITnose
制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如: $(".nav").hover(fun ...
常用的一些 CSS 技巧二 — 选择器（伪类与伪元素）
你可以看看其他常用的 CSS 技巧: 常用的一些 CSS 技巧一常用的一些 CSS 技巧三 CSS 重置盒模型 *, *::before, *::after {box-sizing: border- ...
CSS学习（05结构伪类选择器浮动及清除）
文章目录一结构伪类选择器 1.1 作用与优势: 1.2 选择器 1.3 n的注意点二伪元素 2.1 区别: 2.2 种类: 2.3 注意点: 三标准流四浮动 4.1 浮动的产生 4.2 ...
关于css中after和before伪类的用法
一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类--:hover,:link,:active,:target,:not(),:focus. 常见伪元素--::first-let ...
CSS复合选择器之链接伪类选择器及总结
在某些大型购物网站.新闻网站中可以看到许许多多的链接,其中很多链接的样式都为黑色,当鼠标放到某一链接上的时候,链接的颜色也会变化,点击过后颜色也会变化.这就用到了CSS复合选择器中的链接伪类选择器. ...
CSS基础知识(表单标签、事件、CSS介绍、选择器、伪类选择器案例、样式、盒子模型、定位)...
一. 表单标签 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
【温故知新】CSS学习笔记（链接伪类选择器）
链接伪类选择器伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果. 之前我们学过类选择器,以点"."开头,为了区分开来,伪类选择器则是以冒号":" ...
CSS属性选择器和部分伪类
p[name]{background:red;} 只使用属性名 p[name=ghr]{background:red;} 指定属性名,并指定了该属性的属性值 p[name~=old]{backgrou ...
CSS学习05之结构伪类选择器
回顾基本选择器又分为三种方式: 后代选择器子选择器相邻选择器通用选择器结构伪类选择器结构伪类选择器有很多种伪类,这里我们列举常用的几种方式: first-child 伪类 hover悬停伪 ...

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

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

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

最新文章

热门文章