Home > Article > Web Front-end > Three ways to add strikethrough to text in html and CSS (pictures and text)
Three ways to add strikethrough to text in html and CSS (pictures and text)
- yuliaOriginal
- 2018-10-25 15:01:4119726browse
The annual Double Eleven shopping festival is coming soon. When you browse Taobao, you will definitely pay attention to the price of the product. Have you noticed that the original price of the product has a strikethrough added? As a front-end developer, you know how Use CSS to strikethrough text? This article summarizes three methods for adding strikethrough, including strikethrough tags in HTML and strikethrough styles in CSS. It has certain reference value and interested friends can take a look.
There are three ways to add strikethrough to text, one is the text-decoration style in CSS, the other is the tag, and the last one is tag.
Method 1: Use text-decoration in CSS to set the strikethrough style
Example description: Set the price of the product to be deleted in the tag, give < ;span> Tag a class name p, add CSS style text-decoration: line-through to it, and you can achieve it. The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p{text-decoration: line-through;}
</style>
</head>
<body>
<p>深层补水面膜30片原价¥<span class="p">399</span></p>
<p>双十一面膜30片¥299</p>
</body>
</html>Rendering:
Method 2: Use the tag in html to delete the tag
Instance description: directly use the tag in html to add text Delete the line, the specific code is as follows:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <s>这个商品原价999</s> <p>现价499</p> </body> </html>
The effect is as shown in the figure:
##Method 3: Use in html to delete Tag
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>电视机原价<del>¥4000</del></p> <p>电视剧现价¥2999</p> </body> </html>Effect As shown in the figure:
The above is the detailed content of Three ways to add strikethrough to text in html and CSS (pictures and text). For more information, please follow other related articles on the PHP Chinese website!