Victor Victor - 6 months ago 18
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

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/

Comments