Home >Web Front-end >CSS Tutorial >How to set strikethrough in css
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!