How to make first capital letters using css

Question

I will make my first letter to <span> in equity. But when I use :before in span , the capital letter does not work.

 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 to put as below

 - My first word 

Answer 1

You can use :after instead of :before and put 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

This is a problem with 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, the :: combination before the pseudo-element and the content property can insert some text at the beginning of the element. In this case :: the first letter will correspond to the first letter of this generated content.

If you want the "-" before the capital letter is written in the first letter, you can do the following by changing the 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; }