关于伪元素的用法

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

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

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

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

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

  1. .year:before {
  2.     content: '';
  3.     border-radius: 100%;
  4.     display: inline-block;
  5.     width: 4px;
  6.     height: 4px;
  7.     margin-top: -8px;
  8.     margin-right: 4px;
  9.     background-color: #a2a597;
  10. }
  1. .year:after {
  2.     content: '';
  3.     border-radius: 100%;
  4.     display: inline-block;
  5.     width: 4px;
  6.     height: 4px;
  7.     margin-top: -8px;
  8.     margin-left: 4px;
  9.     background-color: #a2a597;
  10. }

效果如下: