Html 标题前的CSS形状（方形）

我试图在标签前放置一个方形的css。像这样的

我一直想这样做，但我似乎无法让正方形出现。你能帮我解决这个问题吗

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

---

谢谢你的回答

为了查看伪元素，您需要始终定义其内容属性，例如content:：无论如何，在您的示例中，您还应该定义显示属性

例如：

关于语法的最后一点注意事项：CSS3的版本是正确的，但是如果您需要使它与IE8一起工作，只需使用带有单个冒号的CSS2语法：

---

有关详细信息，请访问您需要内容和显示集

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

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