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

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

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

效果如下：

---

关键词: after before css 伪元素

时间：2023年12 月26日，星期二，下午6:16。
通过 RSS 2.0 订阅源关注。