CSS WordPress: How to put a colored space before a text (H2)

Question

I'm trying to style my H2 on a WordPress website

I use custom CSS to style my H2 with a green background and a line above text. I would like to remove background (I know how to do it) add a red blank space before text, how can I do?

This is what I have and the CSS

h2 {
    background-color: #e7f9f9 !important;
    border-top: 1px solid #01c4c4 !important;
    padding: 6px
}

H2 at this time

and this is what I'm trying to have without using an image file before (for performance)

H2 To be

I tried by myself, but it doesn't work

h2 {
    before: " ";
    color: #ff6b26;
    border-top: 1px solid #01c4c4 !important;
    padding: 6px
}

Answer 1

You can use the content property to attach it to the non-breaking space but I don't think this is the right solution. you can nest your H2 inside a div that has the color you would like. then position the H2 with a bit of left padding, a white background & a z-index higher up.

h2::before {
  content: " ";
  background-color: #ff6b26;
  color: #ff6b26;
}

.outer{
  background-color: #ff6b26;
  width: 150px;
  height: 40px;
  margin-top: 10px;
  padding:5px 0 0 10px;
}

.inner{
  background-color: white;
  width: 100px;
  height: 40px;
}

Answer 2

I tried this and finally works:

h2 {
border-top: 1px solid #01c4c4;
border-left: 10px solid #029292;
padding: 3px 0px 0px 10px;
}

Border on top and a colored space before using "border-left". It's simpler and effective! Thank you