How to make first letter capital using css - css

Question

I wand to make my first letter in <span> in capital. But when i use :before in the span capitalize is not working.
span { display:inline-block; color:#66a400; }
span:first-letter { text-transform:capitalize; }
span:before { content:"-"; padding:0 2px; }
<span>my first word</span>
I need out put like below
- My first word

Answer 1

You can use :after instead of :before and float it to the left:
span {
display: inline-block;
color: #66a400;
}
span:first-letter {
text-transform: capitalize;
}
span:after {
content: "-";
padding: 0 2px;
float: left;
}
<span>my first word</span>

Answer 2

It's a problem due to the span:before selector, see below.
From https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter
The first letter of an element is not necessarily trivial to identify:
...
Finally, a combination of the ::before pseudo-element and the content property may inject some text at the beginning of the element.
In that case, ::first-letter will match the first letter of this
generated content.
If you want the "-" before the content with first letter capitalized, you can do as follows, changing your structure and css
CSS
span { display:inline-block; color:#66a400; }
span#before::before { content:"- "; padding:0 2px; }
span#content { text-transform:capitalize; }
HTML
<span id="before"></span><span id="content">my first word</span>

Answer 3

span { display:inline-block; color:#66a400; }
span:before { content:"-"; padding:0 2px; }
span { text-transform:capitalize; }
<p><span>my</span> first word</p>

Answer 4

Try the following:
span::first-letter {
text-transform: uppercase;
}