當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS 巧用 :before和:after

發布時間：2025/5/22 CSS 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS 巧用 :before和:after 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前幾天的晚上較全面的去看了下css的一些文檔和資料，大部分的樣式運用都沒什么大問題了，只是有些許較陌生，但是也知道他們的存在和實現的是什么樣式。今天主要想在這篇學習筆記中寫的也不多，主要是針對:before和:after寫一些內容，還有幾個小樣式略微帶過的介紹下。
什么是:before和:after？該如何使用他們？
:before是css中的一種偽元素，可用于在某個元素之前插入某些內容。
:after是css中的一種偽元素，可用于在某個元素之后插入某些內容。
下面我們先跑個簡單的代碼測試下效果：

以上的代碼將會在頁面中展現的是"Hello World"。我們通過瀏覽器的"審查元素"看到的內容是：

<p>::before"ello Worl"::after </p>

p標簽內部的內容的前面會被插入一個:before偽元素，該偽元素內包含的內容是"H"；而在p標簽內的內容后面會被插入一個:after偽元素，該元素包含的內容是"d"。作為一只合格的程序猴子，捍衛"Hello World"的完整存在是必要的。
既然筆記主要針對是:before和:after，那么肯定不會只是僅僅有以上的簡單介紹就完事。下面我們看看平常該怎么使用他們。
1.結合border寫個對話框的樣式。
本獸將上面這句話拆成2部分：結合border，寫個對話框的樣式。
既然是結合border，那么我們先轉個小話題，簡單由淺入深的介紹下怎么用border畫三角形樣式(這個三角形在寫對話框樣式的時候需要)：

以上代碼將會在頁面上展示一個正方形，左邊是個紅色的三角形，右邊是紫色的三角形，上面是黑色的三角形，下面是藍色的三角形。那么有人就會問，我們要的不是三角形么？野獸你畫個正方形逗我呢？
我們對上面的樣式做些修改：

.triangle{width: 0;height: 0;border:50px solid transparent; /*這里我們將元素的邊框寬度設置為50px，transparent表示邊框顏色是透明的，solid表示邊框是實線的*/border-top-color: black; /*這里我們僅將上邊框的顏色設置為黑色，眾所周知，css后面的樣式代碼會覆蓋之前的相同的樣式代碼，至于其他三邊的還是透明色*//*border-bottom-color: black; //這里設置底部邊框色為黑色border-left-color: black; //這里設置左邊邊框色為黑色border-right-color:black //這里設置右邊邊框色為黑色*/}

然后這時我們就會看到一個在頂部的方向向下的三角形。解釋已詳細的寫在css樣式的注釋里。
接下來我們加上:before：

通過以上代碼，我們將會看見一個類似微信/QQ的對話框樣式,但是美中不足的是，在對話框的四周的邊框不是完整的，而是在對話框的突出三角形上是木有邊框的T_T瞬間冷場有木有，該怎么辦呢？召喚:after穿著棉大衣來救場吧~
完整代碼：

好了，完整的一個對話框樣式呈現在眼前了，至于對話框的小三角形的方向，相信大家看了上上段對于border介紹的代碼也都知道該怎么做了吧，沒錯，就是改下position的位置，改下border顯示顏色的方位~ (本獸不喜歡貼圖片，體諒下額，需要的可以拷貝代碼直接運行看效果，造輪子不僅僅是造輪子，也能讓人加深印象，更好的理解)
2.作為內容的半透明背景層。
比如我們的需求是做一個半透明的登錄框吧(這里也是在代碼中通過注釋來解釋)：

上面的代碼拷貝過去，加上張圖片可測試效果。
當然，:bofore和:after也還有其他更多的巧妙用法，這里也不一一列出來了，這里放上一個用這兩個偽元素加上css3動畫實現一些比較好看及實用的動態效果的鏈接：HoverEffectIdeas
說完了:before和:after，我們稍微扯扯一些其他的css樣式及布局注意點(可能大家不怎么注意，從而導致一些布局和樣式出問題)。
position 定位的問題
position屬性規定了元素的定位類型，默認為static。
該屬性還可以有下值：
absolute：生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。
relative：生成相對定位的元素，相對于其正常位置進行定位。
inherit：規定應該從父元素繼承 position 屬性的值。
代碼：

<style>body{height: 2000px /*這里將body的高度設置為2000px是為了區分absolute和fixed的差別*/}.test-div{position:absolute;left:50px;top:50px}</style><div class="test-div">Hello World</div> <style>body{height: 2000px /*這里將body的高度設置為2000px是為了區分absolute和fixed的差別*/}.test-div{position:fixed;left:50px;top:50px}</style><div class="test-div">Hello World</div> <style>.out-div{width: 300px;height: 300px;background: purple; /*這里定義個背景，讓我們知道這個div在哪*/margin:50px 0px 0px 50px;position: relative}.in-div{position:absolute;left:50px;top:50px}</style><div class="out-div"><div class="in-div">Hello World</div></div>

z-index 元素堆疊排序
z-index用于設置或檢索對象的堆疊順序，對應的腳本特性為zIndex。
z-index的數值越大，該元素的堆疊層級越高。
代碼：

這里我們將第一個div和第二個div位置放到一起，方便看z-index的效果。以上代碼的樣式是紫色的正方形里面有個白色的小正方形。因為小正方形的z-index大于大正方形的z-index，所以能顯示出，當我們把.first-div的z-index設置為3，這時候就看不到白色的小正方形了，它被紫色的大正方形無情的擋掉了...
zoom 元素縮放比例
zoom適用于所有元素，用于設置或檢索對象的縮放比例，對應的腳本特性為zoom，原比例的值是1。
代碼：

以上代碼將會展示的依次是紫色-黑色-紅色的div，大小分別是100px的1.5倍，1倍，0.5倍。
em 和 rem 是什么
1em等于當前的字體尺寸，數值的改變意味著字體大小的調整。em 有繼承這個特性，也就是說，外部父元素定義了字體的em大小，內部子元素會繼承這一屬性的樣式。
rem = root em 。顧名思義，root即根部的，頂部的。也就是根部的em，這個根部指的是HTML根元素。所以rem的大小是針對HTML根元素的大小做字體的相對大小的調整。
代碼：

以上代碼分別展示了不同大小的字體，em和rem的區別可以通過僅僅注釋body字體樣式和html字體樣式來看看他們之間的差別。
今天暫時寫到這里，明天就元旦了，可以好好休息三天了~ 元旦快樂~

這里做個小廣告哦！推薦一本好友破狼和雪狼大叔寫的關于Angular的學習書籍《AngularJS深度剖析與最佳實踐》，本書已可預定，是一本技術含量想當不錯的書籍哦，有興趣的小伙伴可以上各大商城預定，也可點擊以下預售鏈接：http://item.jd.com/11845736.html#none

transparent

總結

以上是生活随笔為你收集整理的CSS 巧用 :before和:after的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

css
巧用