How to make first letter capital using 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>