CSS3中的content和attr的用法

今天再写css3进度条的时候，发现了一个CSS3的content与attr的用法，好用到惊呆了。 如果不想把content的内容写死，就可以使用attr()，具体用法如下。

<div class='bar mint' data-percent='100' data-skill='HTML5'></div>
<!--  注意：自定义的属性要用data-开始-->

.bar:before {
  content: attr(data-skill);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  height: 40px;
  font-style: italic;
  opacity: 0;
  transition: opacity 2s 0.6s;
}

语法： content: attr(自定义属性); 例如： content: attr(data-skill);

转载于:https://my.oschina.net/u/3491864/blog/1502687