.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. SpinBlur - 旋转模糊

    [SpinBlur - 旋转模糊] Using the Spin Blur effect, you can rotate and blur the image around one or more p ...

  2. php7源码编译安装

    以下以CentOS 7.2为例,安装php的运行环境,首先打开php官网http://php.net/点击导航栏的Downloads进入下载页面:http://php.net/downloads.ph ...

  3. 解题报告-Perfect Squares

    Given a positive integer n, find the least number of perfect square numbers (for example, 1, 4, 9, 1 ...

  4. Linux中如何克隆KVM虚拟机

    转载:https://yq.aliyun.com/articles/64860 作者 digoal 日期 2016-11-11 标签 Linux , KVM , 虚拟化 , 克隆 背景 当需要批量部署 ...

  5. 关于C语言中的Complex（复数类型）和imaginary（虚数类型）

    关于C语言中的Complex(复数类型)和imaginary(虚数类型) 其实这里的复数complex就是数学里的复数,包含实部和虚部两个部分,比如:x=2.1+6i,下面进行详细介绍. C99 新增 ...

  6. SLAM应用的一些思考

    关心SLAM技术的人有两种.一是像我这样的研究者,为了了解其中各种方法和模块的原理.二是机器人技术的开发者,旨在将SLAM技术用到他们自己的机器人上.从数量上来说,第二类人数远多于第一类,他们的需求也 ...

  7. Core Graphics Layer Drawing

    [Core Graphics Layer Drawing] CGLayer objects (CGLayerRef data type) allow your application to use l ...

  8. Set List Map

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  9. 常见gcc编译问题解决方法集

    除非明确说明,本文内容仅针对x86/x86_64的Linux开发环境,有朋友说baidu不到,开个贴记录一下(加粗字体是关键词):用"-Wl,-Bstatic"指定链接静态库,使用 ...

  10. linux每天一小步---cp命令详解

    1 命令功能      cp命令用于复制文件或者目录,cp是copy的缩写. 2 命令语法 cp  [参数] 源文件或者目录  目的文件或者目录 3 命令参数 -a  等同于-dRp,保存所有 -d ...