after和 before的作用及使用方法

1.  :before 和 :after 的主要作用是在元素內容前後加上指定內容，示例：

html**：

<

p>你好
p>

p:beforep:after

以上**是:before和:after的基本用法，但是這兩種偽類還有很多更方便的用法。

2. ：after清除浮動

元素設定浮動以後，其父元素以及父元素的兄弟元素的布局都會受到影響，如父元素的背景邊框不能正常顯示，父元素的兄弟元素位置布局錯誤等，

為了避免這種浮動帶來的影響必須要清除浮動，:after就是其中的一種方法。

css**：

ul:after

在日常的工作中會經常遇到小三角形這樣的小圖示，可以用新增的方式實現，但是更方便的是用:after  :before偽類來實現。

html**：

<

div 
class
="demo"
>這是乙個測試
div>

.demo:after

這樣就可以在文字後面新增乙個小三角形啦，是不是很方便

4. 用:after和:before 寫乙個對話方塊

html**：

<

div 
class
="left"
>
<
p>吃了嗎
p>
div>
<
div 
class
="right"
>
<
p>吃過了，吃了紅燒排骨和酸菜魚
p>
div>

.left,.right.right.left > p,.right > p.left:before,.right:after

/*分別給左右兩邊的小三角形定位
*/.left:before.right:after

5.  下面寫乙個帶邊框的對話方塊，乙個對話會同時用到:before和:after

html**不變

css**：

.left,.right.right.left > p,.right > p.left:before,.right:after,.left:after,.right:before

/*分別給左右兩邊的小三角形定位
*/.left:before.left:after.right:after.right:before

(在寫有邊框的對話方塊時乙個三角形需要同時用到:before和:after)

by新手小白的記錄

after 和 before 的應用

在了解高階的應用之前，先來了解一下語法規則。平常僅僅需要將這兩個偽元素用於新增一些自定義字元時，只需使用偽類使用的單冒號寫法，以保證瀏覽器的相容性 p before 不過，在 css3 中為了區別偽元素和偽類為偽元素使用了雙冒號，因此如果使用了 display 或者 width 等屬性時使得顯示脫離...

Before和 After的使用

before的作用就是在乙個類中最先執行的方法 after的作用就是在乙個類中最後執行的方法 這樣就可以把一些重複執行的 抽取出來 這樣我們就不用書寫這些的重複的部分了 例如下面的這段 這是進行查詢 當我們書寫增刪改時候還得全部寫很麻煩 test public void testfindall th...

偽元素 after和 before

after是乙個css偽元素，使用 after，你可以從css裡往頁面上新增內容 不再要在html裡有相應的東西 雖然最終生成的東西並不是真正的dom裡的內容，但這些內容能像普通內容一樣顯示，基本的效果是這樣的 div after 你好div before跟 after完全類似，只是它插入的內容會出...