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

Question

所以我有一些要在其前面添加简单红框的

标签。我认为应该像这样：

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

但实际上我也需要添加一个

。

position: absolute

为了让图形显示出来，此时下面的文本就会被遮挡。因此，目前我正在做以下操作，但实际上我并不喜欢这样做。

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

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

- Csteele5

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>

- Josh Crozier