2

Edit:

It seems to be a futile attempt as there doesn't seem to be a way to make the first letter uppercase if there is a pseudo-element in the way, and unfortuntely the pseudo-element cannot be moved or removed as the below attempted answers would like it to be. In any case, thank you very much for all the help.

I've attached a code example just to make things a bit easier.

I'm wondering if I'm doing this correctly or if this is a futile attempt. Hope to god JavaScript is not needed for something as simple as this.

Thank you very much on any insights!

label span:before {
  display: inline-block;
    content: " ";
  width: 10px; height: 10px;
    margin-right: 10px;
  border: 1px solid #333;
}

label {
  text-transform: lowercase;
}

label::first-letter {
  text-transform: uppercase;
}
<label>
  <span>
    TESTING
  </span>
</label>
adamj
  • 4,672
  • 5
  • 49
  • 60

4 Answers4

4

You have to make the first letter to be uppercase, and the rest of the word lowercase. You also need to make label display: inline-block;

jsfiddle: http://jsfiddle.net/afg3eegs/1/

label {
    display: inline-block;
    text-transform: lowercase;
}

label::first-letter {
    text-transform: uppercase;
}
<label>
    <span>
        TESTING
    </span>
</label>

Hope this helps.

link
  • 2,480
  • 1
  • 16
  • 18
  • @idmean nothing wrong with JSFiddle. It's a lot more flexible than SO snippets – Phil Jul 31 '15 at 05:54
  • @Phil For me it is wrong. I don't like clicking on links and JSFiddle needs ages to load. – idmean Jul 31 '15 at 05:55
  • didn't know about runnable snippets, added just now. thanks – link Jul 31 '15 at 05:59
  • @link Please look at my actual code above more specifically the pseudo-element that's in there. I realize that without the pseudo-element `::first-letter` would work like a charm – adamj Jul 31 '15 at 06:35
2

In this particular case, in order to make the first letter of the <span> element uppercase, you need to move the ::before pseudo-element to the <label> and use ::first-letter pseudo-element on the <span> instead:

label:before {
  display: inline-block;
  content: " ";
  width: 10px; height: 10px;
  margin-right: 10px;
  border: 1px solid #333;
}

label, label span {
  text-transform: lowercase;
  display: inline-block;
}

label span::first-letter {
  text-transform: uppercase;
}
<label>
  <span>
    TESTING
  </span>
</label>

Notice that ::first-letter pseudo-element is not applicable on non-replaced inline level elements.

Mimi
  • 457
  • 3
  • 10
1

Try this, it should work for you.

label {
  text-transform: capitalize;
}
idmean
  • 14,540
  • 9
  • 54
  • 83
Amit Shah
  • 1,380
  • 1
  • 10
  • 19
  • This doesn't actually work if the text is all caps (as in OP's code). Also, this would capitalise multiple words which doesn't exactly fit OP's requirement – Phil Jul 31 '15 at 05:51
  • 1
    And also, it leaves `TESTING` as `TESTING` – Hanky Panky Jul 31 '15 at 05:54
  • in that case css would not help i guess, as you want complete sentence to be capitalized. Following URL would help, i am sure. http://stackoverflow.com/questions/1026069/capitalize-the-first-letter-of-string-in-javascript – Amit Shah Jul 31 '15 at 06:27
-1

If the text "TESTING" is already in capital you cannot make it capitalize using css as far as i know. you should try to do it using javascript. or you may try using display:inline-block property as suggested above.

Ranjankumar Sahoo
  • 1
  • 5