css系列 偽元素 after, before

2021-10-01 11:24:31 字數 714 閱讀 4622

#基本使用

使用偽類 ::before 向前新增內容,使用 ::after 向後面新增內容。

偽類的應用場景比較多,一定要掌握,最下面通過應用例項講解。

a::after

#提取屬性

使用屬性值新增內容,可以使用標準屬性與自定義屬性(一般用data-*表示,比如data-title=「標題」)。

示例一:自定義提示框   

**:一定要使用自定義屬性data-title,否則會出現兩個提示框,乙個預設,乙個自定義。

按鈕

示例二:

上面提示框有個缺陷,提示框的三角是白色背景,若彈窗後面的背景也是白色,那麼三角就看不出來了。所以我們需要用兩個三角覆蓋在一起形成乙個三角,來形成乙個灰色邊框。

css偽類,偽元素

偽類作用於整個元素,比如 a link a hover div first child 儘管這些條件都不是基於dom的,但結果沒乙個都是作用於乙個完整的元素,比如整個鏈結,段落,div等等 偽元素作用於元素一部分,比如 p first line p first letter 偽元素作用於元素的一部分...

CSS偽類 偽元素

css偽類用於向某些選擇器新增特殊的效果。錨偽類a link 未訪問的鏈結 a visited 已訪問的鏈結 a hover 滑鼠移動到鏈結上 a active 選定的鏈結 注意 1 在 css 定義中,a hover 必須被置於 a link 和 a visited 之後,才是有效的。2 在 cs...

CSS 偽元素 偽類

link 未訪問的鏈結 visited 已訪問的鏈結 hover 滑鼠移到元素上 active 向被啟用的鏈結新增樣式 focus 獲得輸入焦點的元素 first child 作為某元素的第乙個子元素的元素 lang 向帶有指定lang屬性的元素新增樣式 在 css 定義中,a hover 必須被置...