Heading customisation - prefixed bar

How can I make "Heading 3" on my web page allways have such a prefixed bar like the green one before "Independent" in the picture?

I assume this is doable with code, but don't know how. Thanks in advance.

I found out, this element is called "border", so I tried to give h3 the property border-left like this:

<style>
.h3 {
  border-left: 10px solid #55A932;
}
</style>

Any idea, why this didn't work?

Website is: copper-minnow-p73t.squarespace.com
Password is: hello