使用伪类(::before/::after)设置文本前后图标。减少标签的浪费，使页面更加整洁。

如图：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .box{
  8.                 margin: 20px;
  9.                 padding: 10px 0;
  10.                 border: 1px solid #ededed;
  11.                 text-align: center;
  12.             }
  13.             .nonemore,.goodbey{
  14.                 display: block;
  15.                 font-size: 14px;
  16.             }
  17.             /* before设置图标 */
  18.             .nonemore::before{
  19.                 content: ' ';
  20.                 display: inline-block;
  21.                 width: 20px;
  22.                 height: 20px;
  23.                 background: url(img/face.png) no-repeat;
  24.                 background-size: 20px;
  25.                 vertical-align: top;
  26.                 padding-right: 10px;
  27.             }
  28.             /* after设置图标 */
  29.             .goodbey::after{
  30.                 content: ' ';
  31.                 display: inline-block;
  32.                 width: 20px;
  33.                 height: 20px;
  34.                 background: url(img/face.png) no-repeat;
  35.                 background-size: 20px;
  36.                 vertical-align: top;
  37.                 margin-left: 10px;
  38.             }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <div class="box">
  43.             <span class="nonemore">没有更多了</span>
  44.         </div>
  45.         <div class="box">
  46.             <span class="goodbey">下次再见哦</span>
  47.         </div>
  48.     </body>
  49. </html>

使用伪类(::before/::after)设置图标的更多相关文章

  1. 利用伪类:before&&:after实现图标库图标

    一.实现如下效果 二.代码实现思路 图案一源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  2. CSS3初学篇章_2（伪类选择符）

    id与class选择符 id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用. id选择符以"#"定义 class选择符以".&quo ...

  3. CSS中的伪类与伪元素

    在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...

  4. jQuery过滤选择器:first和:first-child的区别，CSS伪类:first-child

    最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...

  5. 用伪类实现一个div的宽度和高度是固定百分比

    遇到一个题目:一个div宽度是固定百分比的情况下,如何设置高度是宽度的80% 看到题目的第一反应是用js控制,获取到div的宽度之后再用宽度的80%来设置div的高度,但是如何在不用js的情况下,只用 ...

  6. 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变

    字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...

  7. 给伪类设置z-index= -1;

    .column{ position: relative; float: left; padding: 30px 0; width: 25%; z-index: 0; background-color: ...

  8. 四大伪类,css鼠标样式设置,reset操作,静止对文本操作

    07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...

  9. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

随机推荐

  1. 用阿里云ecs部署kubernetes/K8S的坑（VIP、slb、flannel、gw模式）

    1 阿里云ecs不支持keepalived vip 1.1 场景描述 本来计划用keepalived配合nginx做VIP漂移,用以反代多台master的apiserver的6443端口,结果部署了v ...

  2. Linux 驱动框架---dm9000分析

    前面学习了下Linux下的网络设备驱动程序的框架inux 驱动框架---net驱动框架,感觉知道了一个机器的大致结构还是不太清楚具体的细节处是怎么处理的,所以今天就来以dm9000这个网上教程最多的驱 ...

  3. js var & let & const All In One

    js var & let & const All In One js var & let & const 区别对比 var let const 区别 是否存在 hois ...

  4. Express vs Koa

    Express vs Koa https://www.esparkinfo.com/express-vs-koa.html https://www.cleveroad.com/blog/the-bes ...

  5. .dmg & .pkg & .ipa

    .dmg & .pkg & .ipa Apple, macOS, iOS .dmg mysql-8.0.21-macos10.15-x86_64.dmg https://dev.mys ...

  6. “Fatal error: Unable to find local grunt.” when running “grunt” command

    下载到本地 >npm install grunt >grunt 命令行运行:grunt,出现以下问题: 这些是Gruntfile.js中引用的,依次安装: npm install grun ...

  7. NGK Global英国路演落下帷幕，区块链赋能大数据取得新突破

    NGK全球巡回路演于7月25日在英国圆满举行,此次路演是由NGK英国社区主办,旨在探讨当前大数据爆炸的形式下,区块链如何赋能,解决行业痛点.会上,行业精英.区块链爱好者.各实体产业代表以及科技人员纷纷 ...

  8. 使用 mask 实现视频弹幕人物遮罩过滤

    经常看一些 LOL 比赛直播的小伙伴,肯定都知道,在一些弹幕网站(Bilibili.虎牙)中,当人物与弹幕出现在一起的时候,弹幕会"巧妙"的躲到人物的下面,看着非常的智能. 简单的 ...

  9. 运用Spock编写高质量单元测试

    单元测试作为提升代码质量的有效方法,目前在国内各大互联网公司的开发团队中,尤其是业务团队中却鲜少被使用.这主要由于大家对于单元测试有一些认知错误,或者没有正确的打开方式.至今我们团队在小剧场.零代码运 ...

  10. python类的内部方法

    目录 一.绑定方法与非绑定方法 1.绑定方法 2.非绑定方法 二.property 1.什么是property? 2.为什么要用property? 3.如何使用property? 三.isinstan ...