Make the first character Uppercase in CSS
Note that the ::first-letter
selector does not work with inline elements, so it must be either block
or inline-block
, as follows:
.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}
There's a property for that:
a.m_title {
text-transform: capitalize;
}
If your links can contain multiple words and you only want the first letter of the first word to be uppercase, use :first-letter
with a different transform instead (although it doesn't really matter). Note that in order for :first-letter
to work your a
elements need to be block containers (which can be display: block
, display: inline-block
, or any of a variety of other combinations of one or more properties):
a.m_title {
display: block;
}
a.m_title:first-letter {
text-transform: uppercase;
}