使用伪类(::before/::after)设置图标
使用伪类(::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)设置图标的更多相关文章
- 利用伪类:before&&:after实现图标库图标
一.实现如下效果 二.代码实现思路 图案一源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- CSS3初学篇章_2(伪类选择符)
id与class选择符 id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用. id选择符以"#"定义 class选择符以".&quo ...
- CSS中的伪类与伪元素
在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...
- jQuery过滤选择器:first和:first-child的区别,CSS伪类:first-child
最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...
- 用伪类实现一个div的宽度和高度是固定百分比
遇到一个题目:一个div宽度是固定百分比的情况下,如何设置高度是宽度的80% 看到题目的第一反应是用js控制,获取到div的宽度之后再用宽度的80%来设置div的高度,但是如何在不用js的情况下,只用 ...
- 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变
字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...
- 给伪类设置z-index= -1;
.column{ position: relative; float: left; padding: 30px 0; width: 25%; z-index: 0; background-color: ...
- 四大伪类,css鼠标样式设置,reset操作,静止对文本操作
07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...
- CSS-用伪类制作小箭头(轮播图的左右切换btn)
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
随机推荐
- [Python] Pandas 中 Series 和 DataFrame 的用法笔记
目录 1. Series对象 自定义元素的行标签 使用Series对象定义基于字典创建数据结构 2. DataFrame对象 自定义行标签和列标签 使用DataFrame对象可以基于字典创建数据结构 ...
- InnoDB 存储引擎简介
InnoDB 核心特性 MVCC(Multi-Version Concurrency Control,多版本并发控制),事务处理,行级锁,热备份,自动故障恢复( Crash Safe Recovery ...
- 关于TCP和UDP的通俗理解
TCP和UDP是网络基础,很多公司面试也都会问到,今天我在这里,根据大神们的讲解,自己总结借鉴一下. 首先,先提一个问题:英雄联盟是TCP还是UDP? 这个问题对于游戏玩家,可能大多数人都没有想过.一 ...
- 记一次getshell
水文涉及的知识点: Oday的挖掘 可以执行命令,但是有WAF , 命令执行的绕过 机器不出网,无法反弹 Echo写文件,发现只要写入php文件,后缀就重名为*,如1.php 变成1.* 通过上传 l ...
- μC/OS-III---I笔记13---中断管理
中断管理先看一下最常用的临界段进入的函数:进入临界段 OS_CRITICAL_ENTER() 退出临界段OS_CRITICAL_EXIT()他们两个的宏是这样的. 在使能中断延迟提交时: #if OS ...
- npm & cli & cp: no such file or directory
npm & cli & cp: no such file or directory empty files bug https://npm.runkit.com/hui-cli htt ...
- Flutter 将TextField平滑过渡到Text
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends State ...
- 使用控制台启动Android设备模拟器
文档 > emulator -list-avds Nexus_5X_API_28_x86 Pixel_2_XL_API_28 > emulator.exe -avd Pixel_2_XL_ ...
- java数据类型(基础篇)
public class note02 { public static void main(String[] args) { //八大基本数据类型 //1.整数 byte num1 = 1; shor ...
- 磁盘使用率/文件大小查看指南du & df
一.前言 磁盘使用率,文件大小查看是我们日常使用命令.这两个是配合使用的,磁盘使用率过高告警了,那么得找到对应的磁盘(df),然后找到对应磁盘下的哪个目录和文件占用了空间(du). df(Disk f ...