標題前的CSS形狀（方形）

Question

我試圖在標籤之前放置一個響應式CSS。像這樣的東西

我一直想這樣做，但我似乎無法得到廣場出現。你能幫我解決這個問題嗎？

h1::before { 
position: relative; 
width: 25%; 
padding-bottom: 25%; 
overflow: hidden; 
background: red; 
} 

謝謝您的回答！

Answer 1

爲了看到僞元素，您需要始終定義它的content屬性，例如， content: ""：無論如何，在你的例子中，你也應該定義一個display屬性。

例子：

h1:before { 
    content: ""; 
    display: inline-block; 
    vertical-align: middle; 
    ... 
} 

有關語法最後提醒：:: CSS3的版本是正確的，但如果你需要使它與IE8也工作得使用CSS2語法以單冒號（: ）

而且可在MDN

Answer 2

信息您需要的內容，並顯示設定。

http://jsfiddle.net/37s1mtmk/

h1 { font-size:2em;} 
h1::before { 
width: 1em; 
height:1em; 
background: red; 
display:inline-block; 
content: ""; 
margin-right: 10px; 
}