简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

CSS中的:after和:before的作用是什么_html/css_WEB-ITnose

WBOY
發布： 2016-06-24 11:41:18
原創
1643 人瀏覽過

CSS中的:after和:before的作用是什么:
在当前的页面布局中:after和:before伪对象选择符的使用频率好像并不怎么高，因为低版本IE浏览器并不支持，不过也在清除浮动或者一切其他相关布局中有它们应用的身影。不过随着低版本浏览器使用率的下降，它们出现的频率应该会相应的增加。下面就简单介绍一下这两个伪对象选择符的用法，先看一段代码实例:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> div:before{   content:"添加的内容"; } </style> </head> <body> <div>|div原来的内容</div> </body> </html>
登入後複製

以上代码可以在div元素的内部前端添加指定的内容。当然:before伪对象选择符是和content属性配合使用实现的。
语法结构:

E:before{ Rules }E::before{ Rules }
登入後複製

E表示用选择器匹配的元素，例如:

div:before.first:before#mytest:before
登入後複製

在语法中可以看到有两种语法形式，一种是before前面有一个":"，一种是before前面有两个":"，第一种是CSS2的写法，第二个是CSS3的写法。IE7和IE7以下的浏览器并不支持CSS2写法，IE8和IE8以下浏览器并不支持CSS3的写法。:before伪对象选择符一般和content属性配合使用为指定匹配元素内部的前端添加指定内容。:after伪对象选择符的使用方式和:before的用是一样的，不介绍了。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0501/507.html

相關標籤：
CSS中的:after和:before的作用是什么
來源：php.cn
上一篇：CSS如何实现网易的盖楼效果_html/css_WEB-ITnose 下一篇：html学习-_html/css_WEB-ITnose
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
在網路應用程式中顯示版本資訊的最佳實踐是什麼？ 我正在開發一個網頁應用程式。在網路應用程式中顯示版本資訊的最佳實踐是什麼？我正在使用語義版本控制，並且我已經有了semver，例如1.2.0但我很好奇在哪裡顯示它的最佳方式以及如何...
來自於 2024-04-06 19:13:16
0
2
476
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
OAuth 2.0 配置設定 我使用phpmailer透過smtp.google.com伺服器發送郵件，但現在它無法正常運作，因為他們說使用OAuth2.0設定。我參考了一些範例並使用使用PhpMailer和G...
來自於 2024-04-06 11:12:57
0
1
408
React Router 巢狀路由與搜尋參數的使用 在嵌套的React路由中使用搜尋參數時，當我在/app上，點擊導航到/app/user的連結後，導航就不起作用。如果我嘗試不嵌套使用，它是可以工作的。但為什麼在嵌套時它不起作用。 ...
來自於 2024-04-05 13:48:33
0
1
1475
使用 Eloquent 查詢將使用者分組（總使用者、管理員使用者、控制操作員、警衛） 我有一個查詢，其中計算所有用戶，具有角色“admin”的用戶總數，具有角色“control_operator”的用戶總數和具有角色“guard”的用戶總數。查詢正在工作，但有一個我...
來自於 2024-04-05 12:11:26
0
1
332
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！