着重写一下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常用伪类用法
原文地址：https://www.cnblogs.com/shixy1617/p/9023303.html