标题前的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; 
}