`::before` pseudo element full height

I'm trying to put a before image to the left of some text. But I want the text to NOT wrap below the image. The image is only 40px tall but the text can be any height.

<div class="text">
  Many many words
</div>

.text {
  width: 200px;

  &:before {
    background-image: url('carrot.png');
  }
}

When I do this the words wrap under the carrot. To fix this I can use the absolute top 0 bottom 0 technique to give the before pseudo element full height.

.text {
  width: 200px;
  position: relative;
  padding-left: 32px;

  &:before {
    background-image: url('carrot.png');
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }
}

Now none of the text wraps under the carrot.

Tweet