css3 & content & attr & data-*

content: attr(data-value);

https://github.com/oliviale/CSS-Progress-Pie/blob/master/css/progress_pie_unicorn.css

https://codepen.io/collection/DQvYpQ/

<figure>
<div class="progress-pie-unicorn thick" data-value="90"></div>
<div class="progress-pie-unicorn thin" data-value="78"></div>
</figure>

.progress-pie-unicorn::after {
content: attr(data-value);
position: absolute;
width: 70%;
height: 70%;
margin: auto;
border-radius: 50%;
background-color: #fff;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
font: 900 20px/41px Tahoma;
}

https://www.arm.com/products/silicon-ip-cpu


css3 & content & attr & data-*的更多相关文章

  1. 转载:css3 content 生成内容

    本文地址:http://www.w3cplus.com/solution/css3content/css3content.html 这篇文章挺不错的,建议看一下. content一般和:before, ...

  2. 【转载】css3 content 生成内容

    content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种: none: 不生成任何值. attr: 插入标签属性值 ...

  3. CSS3 content属性学习

    css3中出现了 ":before",":after"伪类, 你可以这样写: h1:after{ content:'h1后插入的文本'; ... } 这两个选择 ...

  4. content:attr()

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. css3 content画出各种图形

    原链接:http://www.phpjz.cn/web/201311/1700.html 之前看到一些网站用户content这个词,觉得很奇怪,原来是css3新增的一个样式,发现还挺好用的,特别是用移 ...

  6. html特殊字符 编码css3 content:"特殊符号"一览

    工作中经常会用到用纯css3美化复选框 <div class="cross"></div> css代码.cross{ width: 20px; height ...

  7. html特殊字符 编码css3 content:"我是特殊符号"

    项目中用到的一些特殊字符和图标 html代码 <div class="cross"></div> css代码 .cross{ width: 20px; he ...

  8. 转载:html特殊字符 编码css3 content:&amp;quot;我是特殊符号&amp;quot;

    项目中用到的一些特殊字符和图标 html代码 <div class="cross"></div> css代码 .cross{ width: 20px; he ...

  9. html特殊字符(css3 content)

    由于偶尔用到,又经常忘记,所以把网上的资料考下来记录一下. <!DOCTYPE html> <html lang="en"> <head> &l ...

随机推荐

  1. Wireshark抓包参数

    目录 wireshark 抓包过滤器 一.抓包过滤器 二.显示过滤器 整理自陈鑫杰老师的wireshark教程课 wireshark 抓包过滤器 过滤器分为抓包过滤器和显示过滤器,抓包过滤器会将不满足 ...

  2. JDBC连接Oracle实现增、删、改操作

    jsp页面的form表单 AddMentaction实现向数据新增数据操作 DeleteMent删除操作 UpdateMent修改操作 最近在做一个练习项目"在线考试系统",在将整 ...

  3. python flask_sqlalchemy 多态 polymorphic 实现单表继承

    sqlalchemy 多态 polymorphic 实现单表继承 sqlaclchemy中的单表继续就是以一个模型类为基类,其他模型类继承基类,所有模型类的的数据都存一张表里面(也可以是多张,只不过基 ...

  4. Git轻松入门2:分支篇

    什么是分支 在玩剧情类游戏时,不同的选择会触发不同的剧情路线,每条剧情路线都会独立发展,最终走向不同的结局. Git中所谓的"分支(branch)"就如同游戏中的剧情路线,用户可以 ...

  5. Web开发模型

    1.服务器 web服务器:pc机器安装一个具有web服务的软件,称之位web服务器 数据库服务器:pc机器安装一个具有数据管理件服务的软件,称之为web服务器 邮件服务器:pc机器安装一个具有发送邮件 ...

  6. AtCoder Beginner Contest 176 D - Wizard in Maze (BFS,双端队列)

    题意:给你一张图,"."表示能走,"#表示不能走,步行可以向四周四个方向移动一个单位,使用魔法可以移动到周围\(5\)X\(5\)的空地,问能否从起点都早终点,并求最少使 ...

  7. BZOJ 4516. [Sdoi2016]生成魔咒【SAM 动态维护不同子串数量】

    [Sdoi2016]生成魔咒 动态维护不同子串的数量 想想如果只要查询一次要怎么做,那就是计算各个点的\(len[u]-len[link[u]]\)然后求和即可,现在要求动态更新,我们可以保存一个答案 ...

  8. 【uva 12219】Common Subexpression Elimination(图论--树+自定义比较器+映射+递归)

    题意:如题,用表达式树来表示一个表达式,且消除公共的部分,即用编号表示.编号 K 定义为表达式第 K 个出现的字符串. 解法:先构造表达式树,给每棵子树用(string,left_son,right_ ...

  9. MySQL8.0数据库出现的问题——外码创建方式、外键约束两个引用列不兼容问题、check约束问题、用触发器代替check约束、关键字DELIMITER、删除添加索引、删除添加外键约束、和一些数据库方面的操作

    一.首先先说一下我们都需要建立那些表 mysql> CREATE TABLE IF NOT EXISTS `student`( -> `sno` CHAR(8) NOT NULL, -&g ...

  10. ElasticSearch入门到筋痛

    1. 什么是ES ES中文网:https://www.elastic.co/guide/cn/elasticsearch/guide/current/index.html ES:是一款基于Lucene ...