标题前的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语法并使用单个冒号(:)

有关MDN的更多信息