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

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

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

本文价绍一种不用再额外添加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

新浪微博:草莽兴

 近期文章

如何一次性推送百万级别的消息

 2021-02-26 17:57  124

redis set集合取出一组数据并删除

 2021-02-26 12:50  179

一年时间又回到这里

 2019-07-27 16:54  330

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

 2018-05-05 01:32  640

 最新评论

 1: 06月03日 16:27
1
来源: javascript常见代码片段之一:IE浏览器的版本判断
 adad: 06月02日 18:21
afdaf
来源: 2017,读过的书
 Nick: 04月14日 12:26
网上的资料还是太老,都只是取一个元素,解决了一大难题
来源: redis set集合取出一组数据并删除
 skywalker: 11月03日 18:21
简洁明了
来源: mysql 获取某个日期的前一天或后一天
 lisheng: 05月09日 19:26
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结