css 中的动态方法 attr（） calc（） counter() - archering/basic GitHub Wiki

当用户打印页面时将页面链接显示出来

attr 用来获取相应选择器html上的属性值，默认返回一个字符串， css3 之后允许返回多种类型.

@media print {     
    a:after {     
    content: " (link to " attr(href) ") ";     
    }     
 }

一个完整的demo

		ul{
			counter-reset: num 0 ; //初始值
		}
		ul>div.head:before{
			counter-increment: num;
			content: "#第" counter(num) "行 ."
		}
		
		div.woai:before{
			content:attr(data-greeting) " " attr(name)
		}
		
		div.ni{
			border:1px solid #ccc;
			width:calc(100% - 400px);
			height: 100px;
		}
		
		div.ni:before{
			content:"宽度是：" calc(100 - 50) "px"
		}

html

	<ul>
		<div class="head"></div>
		<div class="head"></div>
		<div class="head"></div>
		<div class="head"></div>
		<div class="head"></div>
		<div class="head"></div>
		<div class="head"></div>
		<div class="head"></div>
		<div class="head"></div>
		<div class="head"></div>
	</ul>
	
	<div class="woai" name="zhangdong" data-greeting="hello">
		
	</div>
	<div class="woai" name="中国" data-greeting="你好吗？">
		
	</div>
	
	<div class="ni" ></div>
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️