使用CSS中的:before伪元素创建形状

Question

所以我有一些h3标签,我想用一个简单的红色框前面.我会想到类似的东西

h3:before {
    width: 20px;
    height: 20px;
    background: #9B191D;
}

但实际上我还要添加一个

position: absolute

为了使形状显示出来,在这种情况下,以下文字变得模糊.所以目前我正在做以下事情,我真的不喜欢它

h3:before {
    background: #9B191D;
    position: relative;
    content: "..";
    color: #9b191d;
}

但它的确有效.有谁知道如何在不使用的情况下显示给定尺寸的形状position:absolute？

Answer 1

默认情况下,伪元素display是inline.你不能设置width/ height严格的行内元素的,因此,你应该改变display对inline-block.

这样做,您不必采用绝对定位来更改元素的尺寸.

h3:before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #9B191D;
}

<h3>Some header</h3>