浅谈css常用伪类用法

标签：label   用法   pack   alt   box   ima   block   结构   png   

着重写一下after和before的用法：

　　如何变成

上面的目录结构是jsTree生成的，我们知道后边是没有标记的，如何生成呢？

很简单，只有css样式就可以搞定：标签元素+伪类after

a.task-pack:after{//我的样式名称是这个，可以写成你自己的样式名称
　　content: ‘已打包‘;
　　display: inline-block;
　　min-width: 10px;
　　padding: 3px 7px;
　　margin-left: 2px;
　　font-size: 12px;
　　font-weight: bold;
　　color: #fff;
　　line-height: 1;
　　vertical-align: middle;
　　white-space: nowrap;
　　text-align: center;
　　background-color: #009bdb;
　　border-radius: 10px;
}

有时可以用来和checkbox绑定，如果我们想做勾选了复选框有什么变化就可以用

css3兄弟选择器：input:checked+label:after{css样式}，只要被选中，label标签就会有相应的样式变化;

before是放在元素的前面，用法与after相似

浅谈css常用伪类用法

标签：label   用法   pack   alt   box   ima   block   结构   png   

原文地址：https://www.cnblogs.com/shixy1617/p/9023303.html