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

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter — gearsdigital, Feb 08 '17 at 09:41
Possible duplicate of [make the first character uppercase in css](http://stackoverflow.com/questions/5577364/make-the-first-character-uppercase-in-css) — Albert Lazaro de Lara, Feb 08 '17 at 09:41
@albert It's not a dup, the OP problem is with the before pseudo — vals, Feb 08 '17 at 10:21

score 5 · Accepted Answer · answered Feb 08 '17 at 09:43

5

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>

answered Feb 08 '17 at 09:43

dfsq

191,768
25
236
258

Working with float is a bit risky. Dont you need to clear it than ? – DomeTune Feb 08 '17 at 09:44
@DomeTune It's not risky at all. And in this case it's not necessary to clear it even. – dfsq Feb 08 '17 at 09:49
@DomeTune If floated :pseudo was taller *and* span still `inline` than yes you'd need to clear(fix) some element. [Here's a case](http://codepen.io/PhilippeVay/pen/EZMmEB). But here no because span is `inline-block` and even if it wasn't that :pseudo is exactly as tall as surrounding text :) – FelipeAls Feb 15 '17 at 10:30

score 2 · Answer 2 · answered Feb 08 '17 at 10:02

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>

score 1 · Answer 3 · answered Feb 08 '17 at 10:38

1

span { display:inline-block; color:#66a400; }

span:before { content:"-"; padding:0 2px; } span { text-transform:capitalize; }

<p><span>my</span> first word</p>

answered Feb 08 '17 at 10:38

sneha

435
4
9

score 0 · Answer 4 · answered Feb 08 '17 at 09:41

0

Try the following:

span::first-letter { 
    text-transform: uppercase;
}

answered Feb 08 '17 at 09:41

Hamza Ishak

360
4
16

So what, it won't work for the same reason as why original OP's attempt doesn't work. – dfsq Feb 08 '17 at 09:44

How to make first letter capital using css

4 Answers4