Make the first character Uppercase in CSS
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;
}
How to make first letter capital using css
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>
Capitalize first letter of sentences CSS
You can capitalize the first letter of the .qcont
element by using the pseudo-element :first-letter
.
.qcont:first-letter{
text-transform: capitalize
}
This is the closest you're gonna get using only css. You could use javascript (in combination with jQuery) to wrap each letter which comes after a period (or comma, like you wish) in a span
. You could add the same css as above to that span
. Or do it in javascript all together.
Here's a snippet for the css approach:
.qcont:first-letter { text-transform: capitalize}
<p class="qcont">word, another word</p>
Css trying to make first character in input field uppercase
:first-letter
wont work on input field. but it works without that.
So change it as
input {text-transform:capitalize;}
it works fine.
see demo
it works fine without !important
input {text-transform:capitalize;}
<input/>
First letter Capitalize and other letters in lower case in css?
You could use text-transform
in order to make each word of a paragraph capitalized, as follows:
p { text-transform: capitalize; }
It's supported in IE4+. Example Here.
16.5 Capitalization: the 'text-transform' property
This property controls capitalization effects of an element's text.
capitalize
Puts the first character of each word in uppercase; other
characters are unaffected.
Making each word of an uppercase text, capitalized:
The following was under this assumption:
I want to make it look like:
This Is Sometext
You have to wrap each word by a wrapper element like <span>
and use :first-letter
pseudo element in order to transform the first letter of each word:
<p>
<span>THIS</span> <span>IS</span> <span>SOMETEXT</span>
</p>
p { text-transform: lowercase; } /* Make all letters lowercase */
p > span { display: inline-block; } /* :first-letter is applicable to blocks */
p > span:first-letter {
text-transform: uppercase; /* Make the first letters uppercase */
}
Example Here.
Alternatively, you could use JavaScript to wrap each word by a <span>
element:
var words = $("p").text().split(" ");
$("p").empty();
$.each(words, function(i, v) {
$("p").append($("<span>").text(v)).append(" ");
});
Example Here.
Making the first letter of an uppercase text, capitalized:
This seems to be what you are really looking for, that's pretty simple, all you need to do is making all words lowercase and then transforming the first letter of the paragraph to uppercase:
p { text-transform: lowercase; }
p:first-letter {
text-transform: uppercase;
}
Example Here.
CSS Capitalize First Letter In All Caps Word
Yes it is possible with just CSS, here's how:
.capitalize { text-transform: lowercase; display: inline-block;}
.capitalize:first-letter { text-transform: uppercase}
<span class = "capitalize">TESTING</span>
Related Topics
Remove Gutter Space For a Specific Div Only
When Will an ≪A≫ Tag Not Inherit Color Attribute of Parent Tag
@Font-Face Anti-Aliasing on Windows and Mac
Eliminate Flash of Unstyled Content
Aligning Two Divs Side-By-Side
What Is Class="Mb-0" in Bootstrap 4
Using CSS, Can You Apply a Gradient Mask to Fade to the Background Over Text
CSS Z-Index Issue with Nested Elements
Defining Variable Variables Using Less CSS
Why Does 'Overflow:Hidden' Prevent 'Position:Sticky' from Working
How to Insert a Line Break Before an Element Using Css
How to Remove the Outline Around Hyperlinks Images
External CSS VS Inline Style Performance Difference
Is !Important Bad For Performance
How Does #Iefix Solve Web Fonts Loading in IE6-IE8