Home > Article > Web Front-end > How to set strikethrough in css
How to set strikethrough in css
- 醉折花枝作酒筹Original
- 2021-04-20 10:33:2112882browse
In CSS, you can use the text-decoration attribute to set the strikethrough, with the syntax "text-decoration:line-through". The text-decoration attribute sets the text decoration of the element. When the value is line-through, it defines a line that passes under the text.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Create a new test.html page. In the body area of the test.html page, create a new div to store the item name. Create a new span within the div tag to store the item price. Create a new style tag in the body area of the test.html page, and set the price in the span tag to red in the style tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.price{
color:red;
}
</style>
</head>
<body>
<div>键盘:
<span class="price">200元</span>
</div>
</body>
</html>Open test.html in the browser and take a look at the current effect
Go back to the editor, in the style tag of test, set the text-decoration: line-through attribute for span
<style>
.price{
color:red;
text-decoration: line-through;
}
</style>Open test.html again, you will find that the price Strikethrough has been added.
Recommended learning: css video tutorial
The above is the detailed content of How to set strikethrough in css. For more information, please follow other related articles on the PHP Chinese website!