这篇“html的content怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HTML
这篇“html的content怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“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怎么用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网node.js频道。
--结束END--
本文标题: HTML的content怎么用
本文链接: https://www.lsjlt.com/news/94862.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0