.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. 将bmp文件转换为jpg文件

    procedure TForm1.Button1Click(Sender: TObject);(*压缩MBP为JPEG;但是没有提供压缩比可选项凑合用吧,大概1/3 ^_^:Note:必须加上JPEG ...

  2. A*—java代码

    import java.util.ArrayList; // A*算法寻路 public class AStar2 { public static final int[][] maps = { {0, ...

  3. IP地址工具类

    /// <summary> /// 获取客户端IP地址 /// </summary> /// <returns></returns> public st ...

  4. PHP 文件处理（综合）

    1.获取远程文件大小:php获得远程文件大小的函数php获得远程文件大小的函数文件的大小函数为:filesize()文件是否存在的函数为:file_exits();但是这两个函数只针对本地那么:远程文 ...

  5. 自己动手搭建Git服务器-Gitblit

      首先到官网http://gitblit.com/下载最新版本的Gitblit GO 解压缩到本地目录中 E:\git\gitblit132 官方文档:http://gitblit.com/setu ...

  6. java 线程之对象的同步和异步

    一.多线程环境下的同步与异步 同步:A线程要请求某个资源,但是此资源正在被B线程使用中,因为同步机制存在,A线程请求不到,怎么办,A线程只能等待下去. package com.jalja.org.th ...

  7. 二叉树垂直遍历 · Binary Tree Vertical Order Traversal

    ［抄题］: 给定二叉树,返回其节点值的垂直遍历顺序. (即逐列从上到下).如果两个节点在同一行和同一列中,则顺序应 从左到右. 给定一个二叉树 {3,9,20,#,#,15,7} 3 /\ / \ 9 ...

  8. 关于在线文本编辑器防XSS注入攻击问题

    跨站脚本攻击,又称XSS代码攻击,也是一种常见的脚本注入攻击.例如在下面的界面上,很多输入框是可以随意输入内容的,特别是一些文本编辑框里面,可以输入例如<script>alert('这是一 ...

  9. Excel中保留有效数字的问题

    在工作表界面中按 <alt>+<F11>,进入代码页面,然后再 WORKBOOK中插入模块,把以下代码COPY入模块中.就可以在工作表中使用 =YXSZ(数值,保留位数). 如 ...

  10. Imageloader、Glide、Fresco的性能及加载速度比较

    一.使用方式:    // 下面两个依赖包可选,根据需求二选一即可,    compile 'com.ladingwu.library:fresco:0.0.9'    compile 'com.la ...