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

然后就显示出来了

这里有个更直接的例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6. </head>
  7. <style>
  8.   .close {
  9.     background: orange;
  10.     color: red;
  11.     border-radius: 12px;
  12.     line-height: 20px;
  13.     text-align: center;
  14.     height: 20px;
  15.     width: 20px;
  16.     font-size: 18px;
  17.     padding: 1px;
  18.     top: -10px;
  19.     right: -10px;
  20.     position: absolute;
  21. }
  22. /* use cross as close button */
  23. .close::before {
  24.     content: "\2716";
  25. }
  26. </style>
  27. <body>
  28.   <div style="height: 100px; width: 100px; border: 1px solid black; position: relative;">
  29.     <span class="close"></span>
  30. </div>
  31. </body>
  32. </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. maven核心概念及约定的目录结构

  2. cas-client登录后报INVALID_PROXY_CALLBACK

    服务器部署cas,登录后页面提示INVALID_PROXY_CALLBACK 然后查看cas的日志,日志报以下错误: 2018-06-29 11:36:06,251 ERROR [org.jasig. ...

  3. python之private variables

    ［python之private variables］ “Private” instance variables that cannot be accessed except from inside a ...

  4. python中os.system()的返回值

    [python中os.system()的返回值] 如果第三方程序返回的是布尔型返回值,os.system会将true转为1,false转为0进行返回. 问题: /bin/xxx.py是一个返回码为1的 ...

  5. 给mysql数据添加一个只拥有一张表的权限

    grant all privileges on [database].* to 'database'@'localhost' identified by 'password' 例如: grant al ...

  6. shell中的字符串操作和数学运算

    字符串操作   变量赋值: 说明:变量值可以用单引号.双引号.或者不加任何引号来赋值给变量 变量名="变量值" 变量名='变量值' 变量名=变量值 例如:str="hel ...

  7. 非root用户使用1024以下端口

      如果你有一个最新的内核,确实有可能使用它作为非root用户启动服务,但绑定低端口.最简单有效的办法是: #setcap 'cap_net_bind_service=+ep' /path/to/pr ...

  8. Linux C多线程实现生产者消费者

    今天学习了用Linux C进行线程的同步,实现类似生产者消费者的问题.下面我就来分享我的代码 #include<stdio.h> #include<pthread.h> #in ...

  9. 27-python 画图

    绝佳教程:http://pyecharts.org/#/zh-cn/prepare?id=%E4%BD%BF%E7%94%A8%E4%B8%BB%E9%A2%98安装 pyecharts pip in ...

  10. qt5.7 安装

    http://blog.csdn.net/liang19890820/article/details/53931813#安装-qt57 安装运行出错:qt vstool 指定qt安装路径 http:/ ...