css中after的三种用法
2019-10-25 06:27:45来源:爱站网 阅读 ()
在css中存在着一些特殊的属性,我们称之为伪类,比如我们常见的after就是,你知道after的用法有哪些吗?接下来的内容中我们就去看看css中after的三种用法吧,希望对大家有帮助。
CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪:link,:visited,:hover,:active等。
除了它们,还有一些不被常使用的伪类,有:focus,:first-child,:lang等。
而且CSS里不光有伪类,还有伪元素,比如::first-letter,:first-line,:before和:after。
本文中其它伪元素暂且不表,单说:after伪元素。
after顾名思义是在元素后面的意思,实质是在元素之后添加内容。
这个伪元素允许制作人员在元素内容的最后面插入生成内容,需要和content属性一起使用,设置在对象后发生的内容。默认地,这个伪元素是inline行内元素,不过可以使用属性 display 改变这一点。
所有主流浏览器都支持 :after 伪元素,但对于IE来说,只有IE8以上版本支持。
下面举个例子,在CSS代码中插入:
?
<style type="text/css">
h1:after {content:url(logo.gif)}
</style> <h1>标题内容</h1>
在显示时,标题内容后会插入一张图片。这就是伪元素:after的作用。
:after伪类的content还可以跟其它的参数,
一:字符串 例如:
?
?
?
?
<style type="text/css">
.test:after{content:"测试代码"};
</style>
<div class="test">测试div:</div>运行结果显示为:测试div:测试代码
二:attr(x),attr是属性的意思,顾名思义,就是读取该类节点的属性 例如:
?
?
?
?
<style type="text/css">
.test:after{content:attr(id)};
</style>
<div class="test" id="aaa">测试div的id为:</div>运行结果显示为:测试div的id为:aaa
三:固定参数
close-quote:插入 quotes 属性的后标记
no-close-quote :并不插入 quotes 属性的后标记。但增加其嵌套级别
open-quote:插入 quotes 属性的前标记
no-open-quote:并不插入 quotes 属性的前标记。但减少其嵌套级别
上文就是关于css中after的三种用法,是不是很简单呢?有一样需求的用户可以掌握此方法,简单实用的小方法。
原文链接:https://js.aizhan.com/web_authoring/css/9569.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:html常用标签
下一篇:详解块级元素与行级元素
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash