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

如图：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            .box{

                margin: 20px;

                padding: 10px 0;

                border: 1px solid #ededed;

                text-align: center;

            }

            .nonemore,.goodbey{

                display: block;

                font-size: 14px;

            }

            /* before设置图标 */

            .nonemore::before{

                content: ' ';

                display: inline-block;

                width: 20px;

                height: 20px;

                background: url(img/face.png) no-repeat;

                background-size: 20px;

                vertical-align: top;

                padding-right: 10px;

            }

            /* after设置图标 */

            .goodbey::after{

                content: ' ';

                display: inline-block;

                width: 20px;

                height: 20px;

                background: url(img/face.png) no-repeat;

                background-size: 20px;

                vertical-align: top;

                margin-left: 10px;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <span class="nonemore">没有更多了</span>

        </div>

        <div class="box">

            <span class="goodbey">下次再见哦</span>

        </div>

    </body>

</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. 数位dp【模板 + 老年康复】

    学习博客: 戳这里 戳这里 "在信息学竞赛中,有这样一类问题:求给定区间中,满足给定条件的某个D 进制数或此类数的数量.所求的限定条件往往与数位有关,例如数位之和.指定数码个数.数的大小顺序 ...

  2. C# 类(3)

    方法重载 和python类似,在调用函数的时候可以指定默认参数,car("Jeep",color="red") 方法重载就是 可以定义几个同名的函数,然后带有不 ...

  3. HDU 4511 小明系列故事——女友的考验 （AC自动机 + DP）题解

    题意:从 1 走到 n,要求所走路径不能出现给定的路径,求最短路 思路:因为要求不能出现给定路径,那么我可以求助ac自动机完成判断. 我们可以在build的时候标记哪些路径不能出现,显然下面这种表示后 ...

  4. 事件循环 EventLoop（Promise，setTimeOut，async/await执行顺序）

    什么是事件循环?想要了解什么是事件循环就要从js的工作原理开始说起: JS主要的特点就是单线程,所谓单线程就是进程中只有一个线程在运行. 为什么JS是单线程的而不是多线程的呢? JS的主要用途就是与用 ...

  5. Laravel Homestead 安装 使用教程详解！

    1 Laravel Homestead 1 安装: 1 下载: http://www.vagrantup.com/downloads.html 1 配置: 1 1 测试: 1 1 ********** ...

  6. DevOps in Action

    DevOps in Action DevOps is a set of software development practices that combines software developmen ...

  7. D3 tree map

    D3 tree map D3 矩形树图 https://www.zhihu.com/question/55529379 https://zhuanlan.zhihu.com/p/57873460 ht ...

  8. 「NGK每日快讯」2021.1.26日NGK公链第84期官方快讯!

  9. NGK公链大事件盘点——回顾过去，展望未来！

    NGK公链构想广阔,愿景宏大,2020年10月NGK正式上线,同时NGK全球发布会正式启动,建立区块链生态体系. 早在这之前,NGK就经过了紧锣密鼓的数年缜密搭建. 2018年6月NGK底层系统技术原 ...

  10. 为什么说NGK公链的商用落地是可行的？

    互联网.大数据以及云计算的发展给人们的生活.工作带来了诸多便利,也让人们一次又一次感叹科技的进步.而NGK公链的诞生,更是让众人称之为传奇.其商用落地可行性,也让人惊叹.那么,为什么说NGK公链的商用 ...