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. Linux下nf_conntrack（最全面）_董明磊-CSDN博客_nf_conntrack https://blog.csdn.net/qq_35299863/article/details/79530732

    Linux下nf_conntrack(最全面)_董明磊-CSDN博客_nf_conntrack https://blog.csdn.net/qq_35299863/article/details/79 ...

  2. # Set the asyncio reactor's event loop as global # TODO: Should we instead pass the global one into the reactor?

    daphne/server.py at master · django/daphne https://github.com/django/daphne/blob/master/daphne/serve ...

  3. Go Concurrency Patterns: Pipelines and cancellation

    https://blog.golang.org/pipelines Go Concurrency Patterns: Pipelines and cancellation Sameer Ajmani1 ...

  4. Location和Content-Location

    div.example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; mar ...

  5. 使用JWT创建安全的ASP.NET Core Web API

    在本文中,你将学习如何在ASP.NET Core Web API中使用JWT身份验证.我将在编写代码时逐步简化.我们将构建两个终结点,一个用于客户登录,另一个用于获取客户订单.这些api将连接到在本地 ...

  6. 使用Robo 3T操作MongoDB数据库

    安装Robo 3T连接MongoDB数据库教程:https://blog.csdn.net/baidu_39298625/article/details/98845789 在IDEA中用三个jar包链 ...

  7. react+ant design 项目执行yarn run eject 命令后无法启动项目

    如何将内建配置全部暴露? 使用create-react-app结合antd搭建的项目中,项目目录没有该项目所有的内建配置, 1.执行yarn run eject 执行该命令后,运行项目yarn sta ...

  8. OSPF路由汇总

    转载自红茶三杯博客:http://blog.sina.com.cn/s/blog_5ec353710102vtfy.html 1. 关于路由汇总 路由汇总,又被称为路由聚合(Route Aggrega ...

  9. PHP-数组相关知识总结

    PHP-数组相关知识总结 (一)数组创建 //创建数组(php5.4 起可以使用短数组定义语法,用 [] 替代 array()) <?php$array = array(    "fo ...

  10. ness使用-漏扫

    1.登录nessus后,会自动弹出目标输入弹框: 输入目标IP,可通过CIDR表示法(192.168.0.0/80),范围(192.168.0.1-192.168.0.255),或逗号分隔(192.1 ...