Creating a shape using a :before pseudo element in CSS

So I’ve got some h3 tags that I want to prepend with a simple red box. I would have thought something like

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

But I actually also have to add a

position: absolute

in order to get a shape to show up, and in that case the following text becomes obscured. So currently I’m doing the following, and I really don’t like it

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

but it works. Does anyone know how I can get a shape with given dimensions to show up without using position:absolute?


solution

By default, a pseudo element’s display is inline. You can’t set the width/height of a strictly inline-level element, therefore you should change the display to inline-block.

In doing so, you don’t have to resort to absolute positioning in order to change the dimensions of the element.

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