文章圖片
文章圖片
文章圖片
文章圖片
文章圖片
文章圖片
1.新增偽元素選擇器的原理：1）:before偽元素選擇器用于在被選元素的內容前面插入內容 ， 必須配合content屬性來指定要插入的具體內容 。 格式如下：
2）:after偽元素選擇器用于在被選元素的內容后面插入內容 ， 必須配合content屬性來指定要插入的具體內容 。 格式如下：
3.偽元素選擇器的應用場景實例：1）如下圖所示 ， 我們可以配合字體圖標進行使用 ， 具體方法如下：
第一步 ， 首先我們新建一個div并設置高度、寬度以及邊框
第二步 ， 我們將字體圖標樣式引進來（忘記字體圖標的使用 ， 可以翻看往期教程）
第三步 ， 我們利用偽元素選擇器將圖標加進去 。 為了使圖標能夠靠右對齊 ， 我們利用定位進行位置的設置：
2）如下圖 ， 我們想要實現當鼠標經過時 ， 圖片加上一層不透明的效果 。 具體方法如下：
第一步 ， 首先我們先放一張圖片 ， 并設置好寬度和高度 。
第二步 ， 我們創建一個偽元素 ， 寬度和高度與圖片相同 ， 并設置顏色 。
【鼠標|HTML的應用技巧之 新增偽元素選擇器】第三步 ， 我們創建的偽元素由于是在div內部前面創建的 ， 因此我們會發現 ， 它與圖片并列顯示 ， 因此我們將偽元素加上絕對定位 。 在鼠標經過之前是 ， 不顯示 。
第四步 ， 當鼠標經過圖像的時候 ， 顯示偽元素：
相關經驗推薦
- 支付寶|工資一到賬，就存放在支付寶或微信里，會產生怎樣的后果？
- 酷睿處理器|隕落的“空調巨頭”：曾遠超過格力美的，如今卻無人問津？
- 羅永浩|現在來看，錘子科技創業失敗后的羅永浩真的窮嗎？
- 交易|“13香”的充電好搭檔 航嘉G30快速充電器測評
- 微信|活躍量被微信反超，曾經的“國民社交軟件”，QQ為什么越混越差？
- 翻譯|翻譯技術和工具的應用及改進
- 跑分|神州筆記本是怎么混到今天這個地步的
- 英格索蘭|英格索蘭過濾器的詳細使用介紹
- 空調|大疆CEO王滔：其實國產手機本質上就是一種小家電，還不如空調的門檻高
- |為什么現在家電產品的質量越來越差？