首页 > 代码库 > CSS之伪元素
CSS之伪元素
1.:first-line
向元素的首行文本添加样式，不必关心首行是元素节点还是文本节点
<style>body,htm,div,p{ margin:0; padding:0; }div{ width:100px; height:100x; background-color:#FC9;}p{ height:50px; text-align:center; line-height:50px;}div > p:first-child{ background-color:#F90 }div > p:last-child{ background-color:#6CC }div:first-line{ color:red; background-color:green;}</style><div> <p>p1</p> <p>p2</p> </div>
<style>body,htm,div,p{ margin:0; padding:0; }div{ width:100px; height:100px; background-color:#FC9; }p{ height:50px; text-align:center; line-height:50px;}div > p:first-child{ background-color:#F90 }div > p:last-child{ background-color:#6CC }div:first-line{ color:red; background-color:green;}</style><div> This is first line <p>p1</p> <p>p2</p> </div>
由于文本超过div的宽度，换行后，只有第一行有效果
2.:first-letter
向文本的第一个字母添加特殊样式
<style>div:first-letter{ color:red; }</style><div> This is first line <p>p1</p> <p>p2</p></div>
3.
:before 表示在元素的内容之前新插入内容(多媒体或者纯文本)
:after 表示在元素的内容之后新插入内容(多媒体或者纯文本)
<style>div:before{ content:url(images/info.png);} </style><div> This is first line <p>p1</p> <p>p2</p> </div>
<style>div{ width:300px; height:300px; background-color:#FC9; text-align:center;}div:before{ content:url(images/info.png);} div:hover:after{ content:"This is after"; background-color:green; width:100px; height:100px; display:block; margin:0 auto;}</style><div> This is first line <p>p1</p> <p>p2</p></div>
CSS之伪元素
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。