常見偽元素 before和 after的用法

2021-10-05 01:26:20 字數 709 閱讀 3246

::before和::after必須配合content屬性來使用,用於在css渲染中向元素邏輯上的頭部或尾部新增內容。這些新增不會出現在dom中,不會改變文件內容,不可複製,僅僅是在css渲染層加入。所以不要用:before或:after展示有實際意義的內容,盡量使用它們顯示修飾性內容,例如圖示。

content屬性

content用來定義插入的內容,content必須有值,至少是空

常見的用法:

"text/css"

>

p::before

p::after

<

/style>

哈利波特<

/p>

a::before

<

/style>

----

----

----

----

----

-------

"">手機號<

/a>

<

/body>

清除浮動

清除浮動方法有多種,現在最常用的就是下面這種方法,僅需要以下樣式即可在元素尾部自動清除浮動

.cf:before,

.cf:after

.cf:after

before和 after偽元素的常見用法

裝載於 詳細用法請參考原文 一 介紹css3為了區分偽類和偽元素,偽元素採用雙冒號寫法。before和 after下特有的content,用於在css渲染中向元素邏輯上的頭部或尾部新增內容。這些新增不會出現在dom中,不會改變文件內容,不可複製,僅僅是在css渲染層加入。所以不要用 before或 ...

偽元素 after和 before

after是乙個css偽元素,使用 after,你可以從css裡往頁面上新增內容 不再要在html裡有相應的東西 雖然最終生成的東西並不是真正的dom裡的內容,但這些內容能像普通內容一樣顯示,基本的效果是這樣的 div after 你好div before跟 after完全類似,只是它插入的內容會出...

偽元素 after和 before

after 是乙個css偽元素,使用 after 你可以從css裡往頁面上新增內容 不再要在html裡有相應的東西 雖然最終生成的東西並不是真正的dom裡的內容,但這些內容能像普通內容一樣顯示,基本的效果是這樣的 css div after html div 你好div before 跟 after...