Three ways to add strikethrough to text in html and CSS (pictures and text)-HTML Tutorial-php.cn

Three ways to add strikethrough to text in html and CSS (pictures and text)

yulia

Release： 2018-10-25 15:01:41

Original

19786 people have browsed it

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>

Copy after login

Rendering:

Three ways to add strikethrough to text in html and CSS (pictures and text)

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>

~~Copy after login~~

~~The effect is as shown in the figure:~~

~~##Method 3: Use ~~in html to delete Tag~~~~

Example description: The tag is the same as the tag. You can add strikethrough to the text. It is simple and convenient to use. The specific code is as follows:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>电视机原价<del>¥4000</del></p> <p>电视剧现价¥2999</p> </body> </html>
Copy after login
Effect As shown in the figure:

Summary: There are three ways to add strikethrough to text, namely the tag in HTML, the tag and CSS text-decoration: line-through style. It is more convenient to use html tags directly. As for which method to choose, it depends on personal habits and work needs. I hope this article will be helpful to you!
【Recommended related tutorials】
1.
HTML tutorial2.
CSS3 tutorial3.
bootstrap tutorial
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!