实用的content

上述的内容乍看之下很容易理解，比较需要注意的是一定要具备content的属性，就算是只有content:""; 都可以，因为没有content的伪元素是不会出现在画面上的，然而content是个很特别的属性，它可以使用attr直接获取内容元素的属性值( attribute )，举例来说，在HTML里有一个超连结，点击后会弹出新视窗并连结至Google：

google

使用下列的程式码用法，将会把超连结的href 内容与target 内容，透过伪元素一前一后的显示出来。

a::before{
    
 content: attr(href);
    
 color:red;

}

a::after{
    
 content: attr(target);
    
 color:green;

}

此外content内容是可以「相加」的，不过用法不像JavaScript使用+号来相连，而是直接用一个空白键就可以不断的累加下去，以下面的程式码来说，可以在刚刚撷取的超连结文字后方和target属性前方，加入标点符号。

a::before{
    
 content: "( " attr(href) " )  ( " attr(target) " ) ";
    
 color:green;

}

content 甚至可以使用url 放入图片的功能，下列的程式码会呈现出三张图片。

div::before{
    
 content:url(图片网址) url(图片网址) url(图片网址);

}
    

通过调整border的属性，我们可以实现上下左右的三角形，再结合伪元素before，after，content可以绘制多种多边形，笔者在这篇文章有过介绍，感兴趣的可以看看 ：只用1个div，你能用CSS绘制：正3、4、5、6、7、8边形吗？

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！