before与after的一些应用总结
一、偽元素介紹
css3為了區分偽類和偽元素，偽元素采用雙冒號寫法（單冒號也是可以使用的）
常見偽類——:hover,:link,:active,:target,:not(),:focus（文本輸入框聚焦）。
常見偽元素——::first-letter,::first-line,::before,::after,::selection。
:before和:after下特有的content，用于在css渲染中向元素邏輯上的頭部或尾部添加內容。這些添加操作不會出現在DOM中，也不會改變文檔內容，不可復制，僅僅是在css渲染的時候加入。
所以不要用:before或:after展示有實際意義的內容，盡量使用它們顯示修飾性內容。例如添加icon,圖片，鏈接，背景遮罩等；
這是添加一個背景色的效果<style>div{width:100px;height:60px;line-height:60px;text-align:center;border:1px solid #F00;position:relative;}div spandiv:before{content:'';width:100px;height:60px;background:#F0F;opacity:0.5;position:absolute;top:0;left:0; display:none;}div:hover:before{display:block;}</style> </head> <body><div><span>首頁</span></div> </body>
二、content屬性
:before和:after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。默認情況下，偽類元素的display是默認值inline，可以通過設置display:block來改變其顯示。
content可取以下值。
1、string
使用引號包一段字符串，將會向元素內容中添加字符串。如：p:after{content:"@@"}
2、attr()
通過attr()調用當前元素的屬性，比如將圖片alt提示文字或者鏈接的href地址顯示出來。
3、counter()
調用計數器，可以不使用列表元素實現序號功能。
4、attr()
通過attr()調用當前元素的屬性，比如將圖片alt提示文字或者鏈接的href地址顯示出來。
?
?
清除浮動.clearfix:after{ content:""; display:block;clear:both;}
?
轉載于:https://www.cnblogs.com/milx/p/6245888.html
總結
以上是生活随笔為你收集整理的before与after的一些应用总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： bzoj1078【SCOI2008】斜堆
- 下一篇： js实际运用