The annual Double Eleven hand-chopping festival is coming soon. When you visit Taobao, you will definitely pay attention to the price of the product. Have you noticed the strikethrough added to the original price of the product? As a front-end developer, you know how to use CSS to give Do you strikethrough the 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 a strikethrough to text, one is the text-decoration style in CSS, the other is the tag, and the last is Label.
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 the tag a class name p, and add CSS style text-decoration: line-through to it, and it can be realized. The specific code is as follows:
Original price of 30 pieces of deep moisturizing mask¥399
Double Eleven mask 30 pieces ¥299
Effect picture:
Method 2: Use in html to delete tags
Example description: directly use the tag in html to add a strikethrough to the text, the specific code is as follows:
The original price of this product is 999Current price 499
The effect is as shown in the figure:
Method 3: Use delete tag in html
Example description: The tag is the same as the tag. Both can add strikethrough to the text, which is easy to use. The specific code is as follows:
Original price of TV
¥4000The current price of TV series is ¥2999
The effect is shown in the figure:
3. bootstrap tutorial
The above are the details of the three methods (graphics) for adding strikethrough to text in html and CSS, and more Please pay more attention to other related articles on 1024programmer.com!
微信扫一扫打赏
支付宝扫一扫打赏
