前幾天的晚上較全面的去看了下css的一些文檔和資料，大部分的樣式運用都沒什么大問題了，只是有些許較陌生，但是也知道他們的存在和實現的是什么樣式。今天主要想在這篇學習筆記中寫的也不多，主要是針對:before和:after寫一些內容，還有幾個小樣式略微帶過的介紹下。

什么是:before和:after？ 該如何使用他們？

:before是css中的一種偽元素，可用于在某個元素之前插入某些內容。

:after是css中的一種偽元素，可用于在某個元素之后插入某些內容。

下面我們先跑個簡單的代碼測試下效果：

}p:after{content:"d"/*:before和:after必帶技能，重要性為滿5顆星*/

}

ello Worl

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

::before

"ello Worl"

::after

p標簽內部的內容的前面會被插入一個:before偽元素，該偽元素內包含的內容是"H"；而在p標簽內的內容后面會被插入一個:after偽元素，該元素包含的內容是"d"。作為一只合格的程序猴子，捍衛"Hello World"的完整存在是必要的。

既然筆記主要針對是:before和:after，那么肯定不會只是僅僅有以上的簡單介紹就完事。下面我們看看平常該怎么使用他們。

1.結合border寫個對話框的樣式。

本獸將上面這句話拆成2部分：結合border，寫個對話框的樣式。

既然是結合border，那么我們先轉個小話題，簡單由淺入深的介紹下怎么用border畫三角形樣式(這個三角形在寫對話框樣式的時候需要)：

總結

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

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