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

站长手记 作者: 2024-08-28 04:55:01
如果你想在网页的某些文字前加图标或者想改变li元素默认的图标,你会如何做?本文价绍一种不用再额外添加html标签,存粹利用css就能插入或者自作图标的方式。
p:before{
      content:'内容';
}
p:after{
      content:'内容';
}
li:before{
      content:'';
      display:block;
      width:10px;
      height:10px;
      border-radius:10px;/**控制形状**/
      backgroud:#000;/**控制图标颜色**/
     margin-right:10px/**图标与文字距离**/
}
p:before{
     content:url(iconf.png);/**不可以加“”**/
} 
  • Chrome 2+,
  • Firefox 3.5+ (3.0 had partial support),
  • Safari 1.3+,
  • Opera 9.2+,
  • IE8+ (with some minor bugs),
  • 几乎所有的移动浏览器。
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_69939.html
伪元素 :before :after