Web Front-end
CSS Tutorial
Which property is used to underline, overline, and strikethrough text using CSS?
Which property is used to underline, overline, and strikethrough text using CSS?
In CSS, the "text-decoration" property is used to add underline, overline, and strikethrough to text.
Underlining text means drawing a line below the text, and underlining text means drawing a line above the text. Deleting text means drawing a line over the text to show that the text has been deleted.
In this tutorial, we will learn to style different text using different values of the text-decoration CSS property.
grammar
text-decoration: style decoration color thickness;
value
Style——Represents the style of decorative lines, such as solid lines, dotted lines, wavy lines, etc.
Decoration - It can decorate text with "underline", "overline" and "throughline" values.
Color - Set the color of the decorative line.
Thickness——Used to set the thickness of the decorative line.
Example
In the example below, we use the "text-decoration" CSS property to decorate text. We set a "solid" line style, a red "underline" decoration, and a 5px weight, which the user can observe in the output.
<html>
<head>
<style>
.text {
font-size: 1.2rem;
text-decoration: solid underline red 5px;
}
</style>
</head>
<body>
<h3> Setting the underline to the text using the 'text-decoration' property in CSS </h3>
<div class = "text">
This is a text with an underline.
</div>
</body>
</html>
Example
In the example below, we decorate the text with a blue overline. In the output, the user can observe the blue line above the text.
<html>
<head>
<style>
.text {
font-size: 1.2rem;
text-decoration: wavy overline blue 5px;
}
</style>
</head>
<body>
<h3> Setting the <i> overline to the text </i> using the 'textdecoration' property in CSS </h3>
<div class = "text">
This is a text with an overline.
</div>
</body>
</html>
Example
In this example, we used the "text-decoration" CSS property and the "line-through" value to remove text. In the output, the user can observe the lines above the text. This way we can show that there are errors in the text without deleting it.
<html>
<head>
<style>
.text {
font-size: 2rem;
text-decoration: dotted line-through green 5px;
}
</style>
</head>
<body>
<h3> Setting the <i> strickthrough to the text </i> using the 'textdecoration' property in CSS </h3>
<div class = "text">
This is a text with a strikethrough.
</div>
</body>
</html>
Example
In this example, we created three different div elements with different text. We use a different decorative style for the text of each div element. In the output, the user can observe the difference between "underline", "overline" and "thread" text decoration styles.
<html>
<head>
<style>
.underline {
color: grey;
text-decoration: solid underline yellow 2px;
font-size: 1.5rem;
}
.overline {
text-decoration: solid overline yellow 3px;
font-size: 1.5rem;
}
.strikethrough {
text-decoration: solid line-through yellow 2px;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h3> Setting the strikethrough, underline, and overline to the text using the 'text-decoration' property in CSS </h3>
<div class = "underline"> underline </div>
<div class = "overline"> overline </div>
<div class = "strikethrough"> strike through </div>
</body>
</html>
Conclusion
This tutorial teaches users how to decorate text using the “text-decoration” CSS property. Users can decorate the text differently using different values as needed.
The above is the detailed content of Which property is used to underline, overline, and strikethrough text using CSS?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1385
52
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Using Markdown and Localization in the WordPress Block Editor
Apr 02, 2025 am 04:27 AM
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
