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 Svelte
- Create an RSS Reader in Node
- Getting Started with Electron
- How to Set Up Cron Jobs in Linux
- How to deploy a .NET app using Docker
- Best Visual Studio Code Extensions for 2022
- How to deploy a Node app using Docker
- Using Puppeteer and Jest for End-to-End Testing
- How to Scrape the Web using Node.js and Puppeteer
- Learn how to build a Slack Bot using Node.js
- Using Push.js to Display Web Browser Notifications
- Setting Up a Local Web Server using Node.js