偽類 before和 after的使用

2021-08-02 11:09:59 字數 499 閱讀 1032

剛剛在用偽類:before實現乙個小三角組合(使用border),發現乙個以前沒注意到的事情,就是我在:before中設定了

border:10px solid transparent;border-right:10px solid blue;

結果出現了乙個豎著的梯形,這我就很奇怪了啊,我將height設定成0後也還是紋絲不動,於是就在控制台中檢視一下,它的display屬性值為inline,噢,果然將其改為inline-block就ok了。但是我就在想是不是:before中的content:」;影響到的呢,於是就把它給注釋了,結果反而什麼沒了,甚是奇怪,是不是使用這兩個偽類必須要和content屬性搭配在一起呢,我在w3c看到的定義和說明是這樣的:

定義和用法

:before 選擇器在被選元素的內容前面插入內容。

請使用 content 屬性來指定要插入的內容。

那姑且將此記住吧,有大大知道的希望賜教。

偽元素 after和 before

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

偽元素 after和 before

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

偽元素 after和 before

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