This article will guide you about the CSS strikethrough and the other text-decoration properties. So, let’s start!
What are text-decoration CSS Properties?
There are many “text-decoration” property values used in CSS. Some of them are listed below:
Let’s go over them one by one!
text-decoration: line-through
The “line-through” text-decoration property is used to add a horizontal line through the text. This property is also known as crossed-out text.
Example 1: How to Use CSS strikethrough?
First, we will add a <div> named “container” inside the body element of the HTML file. Then, include the <p> tag to add some text.
HTML
In the CSS section, assign the value of the text-decoration property as “line-through”.
CSS
It can be seen that the line-through property is successfully applied to the added text:
To make this decoration more interesting, let’s apply some animation to it.
Example 2: How to Apply Animation on strikethrough With CSS?
Add a div element inside the body element of the HTML file. Inside the div, place a heading <h1> tag with some text.
HTML
Next, apply styles to the HTML elements.
CSS
The HTML elements are styled with CSS properties. To set the text alignment in the center, the div element is provided with the property text-align with the value center:
text-align: center;
}
Style line div
font-family: sans-serif;
font-size: 60px;
color: #00154f;
position: relative;
display: inline-block;
cursor: pointer;
}
The CSS properties that are applied to the line div are explained below:
- “font-family” property sets the font family of the text as “sans-serif”.
- “font-size” property with value “60px” sets the size of the font to 60px.
- “color” property is utilized to specify the color of the text.
- “position” with value “relative” adjusts the line div relative to its current position.
- “display” property as an “inline-block” will allow setting line width and restrict the content to display in the next line.
- “cursor” with the value “pointer” specifies that when the mouse hovers over the text, a pointing hand cursor will display.
Style line div after Selector
The below-given code will style the line div after it is selected. The “::after” is known as the after selector:
content: '';
display: block;
width: 0;
height: 20px;
background-color: #f4af1b;
position: absolute;
bottom: 10%;
z-index: -1;
transition: width 1s;
}
After the line is selected, the mentioned properties will be applied as explained:
- “content” property is utilized to insert the specified content into the element. If the value is none, then after the selection the contents are set according to the mentioned pseudo code.
- “display” as a block takes the available screen width and sets the block to start at a new line.
- “width” property is utilized for setting the element’s width.
- “height” property is utilized for setting the element’s height.
- “background-color” property is utilized for setting the background color of the element.
- “position” as absolute refers that the line div will position relative to its parent div after the selection.
- “bottom” property adds 10% space at the bottom of the line.
- “z-index” defines the order of overlapping elements.
- “transition” property sets the movement of the element where the width value represents the transition that needs to be applied on the width property of an element, and 1s is its duration.
Style line div after hover
Set the width of the line container as 100% when the mouse is hovering on it:
width: 100%;
}
As a result, hovering over the added text will add an animated strikethrough:
text-decoration: underline
The “underline” text-decoration property value will place a line under the text. This property is mainly utilized to make the required text prominent.
CSS
Output
text-decoration: overline
The overline decoration refers to the text having a horizontal line over it. It is also known as an overbar. More specifically, to make a text overline, assign the “text-decoration” property a value “overline”.
CSS
By assigning the value overline, it can be observed that a bar is shown over the text:
text-decoration: none
If you don’t need any text decoration, assign the value “none” to the “text-decoration” property.
CSS
Output
So far, we have discussed the text-decoration properties, line-through, underline, overline, and none with examples. The next section will discuss the text-decoration attribute values. So, let’s go!
text-decoration Attribute Values
You can utilize add other attribute values as well:
- text-decoration-line: It defines the line type such as underline, line-through, overline, and more.
- text-decoration-color: It defines the line color.
- text-decoration-style: It specifies the style of the line, whether wavy, dotted, dashed, etc.
- text-decoration-thickness: It defines the width of the line.
Look at the example below, which shows text-decoration with multiple values discussed above.
Example
Firstly, add a dotted line over the text having 10px width and the specified color:
Then, a wavy underline with the required width and color:
The above-provided CSS code lines will show the following results:
We have provided the information related to the CSS strikethrough, and other text decoration properties.
Conclusion
The text-decoration properties of CSS set the appearance of different decorative lines on the added text. More specifically, strikethrough adds a line through the text which can be applied by setting the value of text-decoration as “line-through”. This post discussed the CSS strikethrough, other text-decoration properties, and attribute values.
