千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > css偽元素的實用技巧

css偽元素的實用技巧

來源:千鋒教育
發布人:wjy
時間: 2022-10-10 14:01:47 1665381707

  1.定義

  偽元素用于創建一些不在文檔樹中的元素,并為其添加樣式。比如說,我們可以通過:before :after來在一個元素前、后增加一些文本,并為這些文本添加樣式。雖然用戶可以看到這些文本,但是這些文本實際上不在文檔樹中。

  2.偽元素的單雙冒號

  在CSS2之前規范不明確的時,偽元素使用單冒號(:)來表示;

  在CSS3規范中的要求使用雙冒號(::)表示偽元素,以此來區分偽元素和偽類;但為了向上兼容,現在用單冒號(:)也可以的。

  3. 使用場景

  下面運用before和after在元素前面和后面插入偽元素,實現一些有意思的小效果,代碼和效果圖附上。

  3.1用偽元素實現插入文字、字體圖標庫

  3.1.1插入文字:

css偽元素的實用技巧1

  效果如下:

css偽元素的實用技巧2

  3.1.2插入iconfont字體圖標庫:

css偽元素的實用技巧3

  根據效果圖可以看到偽元素是inline元素類型

css偽元素的實用技巧4

  3.2清除浮動

  解決浮動導致的父元素高度塌陷的問題

css偽元素的實用技巧5

  3.3分割線效果

css偽元素的實用技巧6

  效果圖:

css偽元素的實用技巧7

  3.4對話框效果

css偽元素的實用技巧8

  效果圖如下:

css偽元素的實用技巧9

  3.5 相片層疊效果

css偽元素的實用技巧10

css偽元素的實用技巧11

  效果圖如下:

css偽元素的實用技巧12

  總結

  使用偽元素能實現的效果非常多,也可以減少網頁中標簽的使用,一起動手試試看偽元素的妙用技巧吧。

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
久久亚洲中文字幕精品一区四,亚洲日本另类欧美一区二区,久久久久久久这里只有免费费精品,高清国产激情视频在线观看
久久久久久免费一区二区三区 | 亚洲v日本v欧美v综合v | 亚洲国产中文一卡二卡三卡免费 | 五月激情丁香婷婷综合中文字幕 | 伊人久久亚洲国产嫩草影院 | 午夜精品久久久久久不卡 |