偽元素需要將其設定為塊級元素或者塊級內聯元素才能設定尺寸
可以使用偽元素選擇器建立一個偽元素,如果想設定這個偽元素的尺寸。
那麼就必須這個偽元素設定為塊級元素或者塊級內聯元素,也就是說偽元素預設具有內聯元素的特點。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; list-style: none; } .box{ width: 100px; height: 100px; margin: 12px; background-color:#ccc; } div:before { content:""; width: 100px; height: 100px; display:block; background-color:green; } </style> </head> <body> <div></div> </body> </html>
相關文章
- HTML 塊級元素和內聯元素HTML
- CSS塊級/內聯元素CSS
- 塊級元素與內聯元素相互轉換
- 內聯元素和塊級元素相互轉換
- 塊級元素和行內元素
- 行內元素和塊級元素
- 塊狀元素、內聯元素和內聯塊狀元素
- HTML_行內元素、塊級元素、空元素HTML
- 02 CSS塊級元素和行內元素CSS
- CSS的塊級元素和行內元素CSS
- 塊級元素和行內元素的區別
- 常見塊元素和內聯元素
- CSS塊狀元素和內聯元素CSS
- 塊級元素和行內元素分別有哪些
- HTML 中塊級元素設定 height:100% 的實現HTML
- css設定span元素的尺寸CSS
- HTML的行內元素與塊級元素的區別?HTML
- 【前端】HTML__內聯元素與塊元素前端HTML
- 行內元素和塊級元素使用浮動後的變化
- 行級元素左右邊距及塊級元素上下邊距
- CSS基礎——塊級元素、塊級盒子以及BFCCSS
- text-align對內聯塊級元素同樣有效
- 行內元素與塊元素1
- jQuery動態設定div元素的尺寸jQuery
- HTML5下<a>元素下可以包裹塊級元素HTML
- 行內元素和塊計元素需要注意的地方
- css使用偽物件選擇器設定元素內容CSS物件
- 行內元素屬性設定
- Q:為何img、input等內聯元素可設定寬高
- CSS行內元素設定寬高CSS
- 設定display:none無法獲取元素的尺寸None
- javascript緩衝彈性方式設定元素的尺寸JavaScript
- JavaScript 動畫方式設定元素尺寸和透明度JavaScript動畫
- CSS 技巧篇(六):display設定元素為行內元素時,元素之間存在間隙問題CSS
- html塊元素和內斂元素的區別HTML
- 塊級元素不能夠巢狀在<p>標籤元素中巢狀
- 透徹理解塊級元素的寬度
- HTML的display屬性將行內元素、塊狀元素、行內塊狀元素互相轉換以及三者的區別HTML