首页 网络技术
  1. 正文

HTML的content怎么用

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

<a href="https://www.google.com" target="_blank">google</a>

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

a::before{ content: attr(href); color:red;}a::after{ content: attr(target); color:green;}

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

a::before{ content: "( " attr(href) " ) < "; color:red;}a::after{ content: " > ( " attr(target) " ) "; color:green;}

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

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

本文标题:HTML的content怎么用
本文链接:https://www.qqooo.cn/post/6797.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!