使用::befor和::after偽元素在網站中添加圖標


css3為了區分偽類和偽元素,偽元素采用雙冒號寫法。

常見偽類——:hover,:link,:active,:target,:not(),:focus。

常見偽元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content,用於在css渲染中向元素邏輯上的頭部或尾部添加內容。

這些添加不會出現在DOM中,不會改變文檔內容,不可復制,僅僅是在css渲染層加入。

所以不要用:before或:after展示有實際意義的內容,盡量使用它們顯示修飾性內容,例如圖標。

舉例:網站有些聯系電話,希望在它們前加一個icon☎,就可以使用:before偽元素,如下:

<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
    .phoneNumber::before {
    content:'\260E';
    font-size: 15px;
}
</style>
<p class="phoneNumber">12345645654</p>

這些特殊字符的html,js和css的寫法是不同的 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM