Table of Contents
Modern CSS lets you do some pretty cool things that previously required JavaScript.
One of these features is being able to capitalize the first letter of a word.
Thankfully, you can now do this entirely in CSS.
In this post, we'll learn how to capitalize the first letter of a word in CSS.
How to capitalize the first letter of a word
To start, let's say this is our example HTML:
HTML<p>hello world</p>
Try it out without styles:
- HTML
We can target just the first letter by using the first-letter
pseudo-class.
CSSp:first-letter {
/* styles for the first letter */
}
This will apply styles to just the first letter of the element.
Now if we want to capitalize it, we can just add the text-transform
property.
CSSp:first-letter {
text-transform: capitalize;
}
Try it below:
- HTML
- CSS
You should now see that the text reads:
BASHHello world
Conclusion
In this post, we learned how to use CSS to capitalize the first letter of a word.
Simply use the first-letter
pseudo-class to target the first letter of an element, and add the text-transform
property to capitalize it.
Thanks for reading and happy coding!
- Getting Started with TypeScript
- How to Install Node on Windows, macOS and Linux
- Getting Started with Solid
- Getting Started with Express
- Create an RSS Reader in Node
- Best Visual Studio Code Extensions for 2022
- How to deploy a Deno app using Docker
- Getting Started with Deno
- Using Puppeteer and Jest for End-to-End Testing
- Getting Started with Moment.js
- Using Push.js to Display Web Browser Notifications
- Building a Real-Time Note-Taking App with Vue and Firebase