.close::before {
　　content: "\2716";
}

然后就显示出来了

这里有个更直接的例子

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<style>

  .close {

    background: orange;

    color: red;

    border-radius: 12px;

    line-height: 20px;

    text-align: center;

    height: 20px;

    width: 20px;

    font-size: 18px;

    padding: 1px;

    top: -10px;

    right: -10px;

    position: absolute;

}

/* use cross as close button */

.close::before {

    content: "\2716";

}

</style>

<body>

  <div style="height: 100px; width: 100px; border: 1px solid black; position: relative;">

    <span class="close"></span>

</div>

</body>

</html>

　　

css 实现关闭按钮 X的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. 纯Div+Css制作的漂亮点击按钮和关闭按钮

    纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.

  3. amazeui学习笔记--css（常用组件4）--关闭按钮Close

    amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...

  4. css 关闭按钮实现

    通过css的伪元素:before,:after以及transform: rotate(45deg);旋转来实现(支持IE9及其以上版本) <div class="close" ...

  5. css画叉叉(一般用于关闭按钮)

    css 一般用于右上角关闭弹窗 #pdclose { width: 18px; height: 18px; cursor: pointer; float: right; position: relat ...

  6. bootstrap css总结

    base css 我分为了几大类 1,列表 .unstyled(无样式列表),.dl-horizontal(dl列表水平排列) 2,代码 code(行级),pre(块级),.pre-scrollabl ...

  7. 面试题HTML +CSS

    HTML+CSS部分1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他 ...

  8. [原创]Lodop打印, 以及Lodop引用css文件控制打印样式的问题.

    最近在做Lodop打印功能: 思路是:  用MasterPage搭个打印页面的框架, 然后在具体的页面中填入数据, 打印的样式由母版页和CSS来控制. 困扰了一天的问题是:  在打印的JS文件中, 引 ...

  9. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

随机推荐

  1. 若(p,q)=1，则(p^n,q^n)=1

    [若(p,q)=1,则(p^n,q^n)=1] 因(p,q)=1,则p,q可分别表示成如下的形式: p=A^a*B^b*C^c, q=D^d*E^e*F^f 显示ABC.DEF无交集.而p^n.q^n ...

  2. codeforces:855D Rowena Ravenclaw's Diadem分析和实现

    题目大意: 提供n个对象,分别编号为1,...,n.每个对象都可能是某个编号小于自己的对象的特例或是成分.认为某个对象的特例的特例依旧是该对象的特例,即特例关系传递,同样一个对象的成分的成分依旧是该对 ...

  3. Ubuntu切换阿里源

    sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak #备份 sudo vim /etc/apt/sources.list #修改 sudo ...

  4. 电话号码的字母组合 · Letter Combinations of a Phone Number

    ［抄题］: Given a digit string excluded 01, return all possible letter combinations that the number coul ...

  5. WebLogic(12C)——几个基本概念

    转http://blog.csdn.net/hanxuemin12345/article/details/46287597 目录(?)[-] 域Domain 服务器Server 机器Machine W ...

  6. sqlserver select 查询字段if判断用法

    SELECT TOP 1000 [id],      case when group_id>1 then 'vip'           else '普通会员'           end  F ...

  7. CMD一般命令

    返回根目录:cd\ 回车 进入D盘:输入cd\ 回车,返回根目录,再输入d:回车,即可进入d盘(注意:字符都是英文字符) 进入D盘叫JDK的文件夹:如上面进入d盘后,输入:cd jdk 回车即可 进入 ...

  8. 15 Independent Alleles

    Problem Figure 2. The probability of each outcome for the sum of the values on two rolled dice (blac ...

  9. CentOS 最新版的下载地址 + 版本选择详解

    CentOS 最新版的下载地址 + 版本选择详解 发现越来越多的机关单位.事业单位开始使用 Linux 作为主要服务器,毕竟,Linux的稳定性和高效性是众所周知的,所以我也打算把自己这一块技术加强一 ...

  10. Mac Sublime Text 浏览器 设置快捷键 让html文件在浏览器打开

    首先,进入命令行界面(这里mac和windows一样) 应用命令下载插件 输入命令二 然后就会发现在工具栏多出一个下拉选项 mac的跟它有些区别就是快捷键 mac快捷键是^+√+ V ++字母V,就会 ...