标题前的CSS形状（方形）

Question

我试图在标签之前放置一个响应式css广场。像这样的东西

我一直试图这样做，但我似乎无法让广场出现。你能帮帮我解决这个问题。

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

感谢您的回答！

Answer 1

要查看伪元素，您需要始终定义其content属性，例如content: ""：无论如何，在您的示例中，您还应该定义display属性。

示例：http://codepen.io/anon/pen/bNNQrj

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

关于语法的最后一点说明：:: CSS3版本是正确的，但是如果你需要使它与IE8一起使用，只需使用带有单个冒号的CSS2语法（{{1} }）

有关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;
}