关于伪元素的用法

2023年12 月26日 / 网站源码 / 没有评论 / 2,641次

现在网页前端设计真的太厉害了，十多年前很多都要使用图片或者js来实现，现在是要一些简单的代码就能达到很好的效果。最简单的就是二十年前wordpress经典默认主题Kubrick《wordpress主题Kubrick的历史》就是使用了阴影圆角图片达到了边框圆角效果而闻名。但是后来龙哥通过边框的圆角加阴影效果来完美实现了，详见《再次修改和使用wordpress经典主题default1.72（Kubrick）》。后来通过Awesome图标接触到了伪元素，后来通过自己测试，把content: '图标代码'里面的图标代码换成文字或者其他的居然能显示，于是大量使用在了自己做的css上。

下面特介绍使用伪元素的简单方法：

.long:before {
content: '';
border-radius: 100%;
border: 2px solid #777;
display: inline-block;
width: 5px;
height: 5px;
margin: 0 8px 1px 0;
background-color: #4acc40
}

那么这个效果就是一个带变宽的远点（border-radius: 0;将是方块），那么如果在把content: ''替换成content: '龙'，那么将显示的是龙这个字，content: url('图片地址')，那么将显示图片，同样也可以填入其他的字符，还能自己添加相应的css样式。这样如果有时候需要在一个id或者class前后加入想要的伪元素来实现显示自己想要的东西，那么就可以用:before和:after这两个伪元素来实现。比如通过以下两个代码就实现了年份前后两个小圆点效果：

.year:before {
content: '';
border-radius: 100%;
display: inline-block;
width: 4px;
height: 4px;
margin-top: -8px;
margin-right: 4px;
background-color: #a2a597;
}