专注WEB开发 分享经验,沉淀知识

利用伪元素:before和:after插入图标

 作者:chenxing  时间:2016-09-25 17:57  阅读:850  评论:

本文价绍一种不用再额外添加html标签,存粹利用css就能插入或者自作图标的方式。

如果你想在网页的某些文字前加图标或者想改变li元素默认的图标,你会如何做?

常见的做法是在文字前再加一个标签用于存放图标,引入一个图标库(比如Iconfont-阿里巴巴矢量图标库)或者一张图标图片。

本文价绍一种不用再额外添加html标签,存粹利用css就能插入或者自作图标的方式。

先了解伪元素:before和:after定义与语法

定义:在被选元素的内容前面(before)和后面(after)插入内容。

语法:

p:before{
      content:'内容';
}

p:after{
      content:'内容';
}

给li标签添加多样图标

li前的图标可以是圆形,方形,椭圆等,可以是空心实心,可以是黑色,绿色,蓝色。。。

简单的几行代码就能实现:

li:before{
      content:'';
      display:block;
      width:10px;
      height:10px;
      border-radius:10px;/**控制形状**/
      backgroud:#000;/**控制图标颜色**/
     margin-right:10px/**图标与文字距离**/
}

引入一张图片图标

对于特殊的图标,需要用图片完成的,同样可以before插入到页面中。

p:before{
     content:url(iconf.png);/**不可以加“”**/
} 

需要注意的是引入图片是content:后面不能用“”包起来,会被理解字符串做内容插入到页面中。

浏览器的兼容性

  • Chrome 2+,
  • Firefox 3.5+ (3.0 had partial support),
  • Safari 1.3+,
  • Opera 9.2+,
  • IE8+ (with some minor bugs),
  • 几乎所有的移动浏览器。

可以看出几乎是针对高级浏览器的一种元素。如果还没有意识的摈弃ie8以下的开发者这类元素并不适合你。在未来随着低版本的浏览器占的市场份额越来越小,像这类的元素应用将越来越频繁,以提高开发效率。

以上只是:before和:after的一个小应用,希望对大家能有用。

除特别注明外,本网站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 https://www.qiusuoweb.com/5.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  75

PHP字符串转数组的三种场景

 2018-05-05 01:32  176

PHP如何遍历字符串?

 2018-05-04 00:56  877

api接口常见的安全问题和解决方案

 2018-05-03 23:20  784

 最新评论

 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里
 花花草草: 10月14日 14:58
tp5不是已经提前开了吗
来源: _SESSION变量未定义?
 疯了: 10月10日 13:40
你好呀,我使用docker构建的 把整个项目给了777 并把runtime的所有者给了nginx php的运行者还是报错
来源: thinkphp5的mkdir() Permission denied问题探讨
 mesecretme: 09月30日 15:30
有个问题,有没有发现用redis保存session的话,session清空redis的key还没过期,会依然保留的,这是值变成空了
来源: php项目redis实现session共享案例
 旧久: 09月20日 07:24
感谢!
来源: 没备案域名如何在阿里云服务器上使用?
 pagenoname: 08月24日 18:51
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里