Victor Victor - 1 year ago 239
CSS Question

It is possible to display the first character in uppercase and the others in lowercase employing CSS only

For example, strings like this, that lies inside an HTML element:

- One Tree
- one tree
- One tree
- one Tree


After applying the style they should be rendered as:

One tree


P.D: Only using CSS, no javascript and no additional processing.

Answer Source

Yes perfectly possible.

See this code for example:

li, 
p{
 text-transform: lowercase; 
}
li::first-letter,
p::first-letter{
  text-transform: uppercase;
}
<ul>
<li>first Li Item</li>
<li>SeCOND li Item</li>
</ul>
<p>
First PitEm is herE.
</p>

Example here: https://jsfiddle.net/s23xr3km/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download