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. Server:www121 Server:www120 Server:NWS_SP 内容被散列，并在响应中放入Etag When to Use Entity-Tags and Last-Modified Dates

    1 Request URL:http://www.biyao.com/minisite/bzzx 2 Request Method:GET 3 Status Code:200 OK 4 Remote ...

  2. muduo 网络库的整体架构图和一个简化版本的架构设计

    https://blog.csdn.net/adkada1/article/details/54342275 简析 https://blog.csdn.net/amoscykl/article/det ...

  3. 从零开始学Java （四）输入输出

    这块内容对于有基础的人没啥好说的... 1 System.out.print("C"); 2 System.out.println(); 上边和下边等价 1 System.out. ...

  4. 输入DStream之基础数据源以及基于HDFS的实时wordcount程序

    输入DStream之基础数据源以及基于HDFS的实时wordcount程序 一.Java方式 二.Scala方式 基于HDFS文件的实时计算,其实就是,监控一个HDFS目录,只要其中有新文件出现,就实 ...

  5. 封装验证blue事件插件

    (function ($) { $.fn.checkForm = function (options) { var root = this; //将当前应用对象存入root var isok = fa ...

  6. 我用了半年的时间，把python学到了能出书的程度

    Python难学吗?不难,我边做项目边学,过了半年就通过了出版社编辑的面试,接到了一本Python选题,并成功出版. 有同学会说,你有编程基础外带项目实践机会,所以学得快.这话不假,我之前的基础确实加 ...

  7. Elasticsearch 之 Filter 与 Query 有啥不同？

    今天来了解下 Elasticsearch(以下简称 ES) 中的 Query 和 Filter. 在 ES 中,提供了 Query 和 Filter 两种搜索: Query Context:会对搜索进 ...

  8. SOLID：面向对象设计的五个基本原则

    在程序设计领域,SOLID 是由罗伯特·C·马丁在 21 世纪早期引入的记忆术首字母缩略字,指代了面向对象编程和面向对象设计的五个基本原则.当这些原则被一起应用时,它们使得一个程序员开发一个容易进行软 ...

  9. CodeForces 630Q Pyramids（数学公式）

    IT City administration has no rest because of the fame of the Pyramids in Egypt. There is a project ...

  10. python的re模块一些方法 && Tkinter图形界面设计 && 终止python运行函数 && python读写文件 && python一旦给字符串赋值就不能单独改变某个字符，除非重新给变量赋值

    Tkinter图形界面设计见:https://www.cnblogs.com/pywjh/p/9527828.html#radiobutton 终止python运行函数: 采用sys.exit(0)正 ...