小挖掘 偽類 before after

2021-06-20 21:20:14 字數 668 閱讀 6712

**:

before和:after的作用就是在指定的元素內容(而不是元素本身)之前或者之後插入乙個包含content屬性指定內容的行內元素,最基本的用法如下:

#ex:before 

#ex:after

這段**會在#ex元素內容之前插入乙個'#',以及在內容之後新增乙個'$',插入的行內元素是作為#ex的子元素,效果如下:

如果沒有content屬性,偽類元素將沒有任何作用。但是可以指定content為空,同時正如前面所說,插入的內容預設是乙個行內元素,並且在html源**中無法看到,這就是為什麼稱之為偽類元素的理由,所以也就無法通過dom對其進行操作。

ps。瀏覽器支援情況

放在偽類元素裡面的內容一般都只是裝飾性的,所以即便是ie6/7不支援也應該能降級到正常顯示主體內容。

ps。第二次,可以用這兩個偽類做些有意思的小玩意兒哦~例如畫個太極圖~!

上碼!:

#yin-yang 

#yin-yang:before

#yin-yang:after

效果圖:

偽元素 偽類

偽元素在dom中建立了一些抽象元素,而且這些元素本身時不存在與dom中的。在css3中偽元素前要使用 兩個冒號 比如 使用在使用 before 和 after時,要使用content進行內容設定。預設情況下,偽元素插入的內容為行內元素,不過可以使用display進行設定。注意 同時只能使用乙個偽元素...

偽類 偽元素

偽類和偽元素在web開發中用的好的話,可以說猶如神助。但一定要分清楚,什麼是偽類,什麼是偽元素。如何區分偽元素與偽類?答 偽元素在html文件渲染後,頁面中有相應的內容顯示,同時能夠設定它的樣式,而偽類只能設定樣式 偽元素和元素的區別?答 很明顯,從字面意思上來說,偽元素就不是真正的元素,而只有形而...

偽類 偽元素

偽類和偽元素 偽類其實是為彌補css選擇器的不足,用來更方便地獲取資訊 而偽元素本質上是建立了乙個虛擬容器 元素 我們可以在其中新增內容或樣式 css3中,偽類用單冒號 表示 而偽元素用雙冒號 表示 before 偽元素可以在元素的內容前面插入新內容 after 偽元素以在元素的內容之後插入新內容 ...