Home >Web Front-end >CSS Tutorial >How to add strikethrough in css? css text-decoration attribute sets strikethrough (code example)
How to add strikethrough in css? css text-decoration attribute sets strikethrough (code example)
- 青灯夜游Original
- 2018-10-09 14:10:0623020browse
How to add strikethrough in css? In the previous article [htmlHow to add strikethrough to text? Two methods to add strikethrough (examples)] We have introduced two methods to add strikethrough to html tags. This chapter will introduce to you how to use css text-decoration attribute to add strikethrough to text. Strikethrough effect, how to set strikethrough style using css. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
First of all, we understand the css text-decoration attribute. Let’s briefly introduce it:
The text-decoration attribute specifies the decoration added to the text.
Description:
This attribute allows you to set certain effects on the text, such as adding strikethrough. If the descendant element does not have its own decorations, the decorations set on the ancestor element will "extend" to the descendant elements. User agents are not required to support blink.
So how touse the css text-decoration attribute to add the strikethrough effect of text, below we will explain in detail the implementation method of css strikethrough through a simple code example!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css添加文本文字的删除线</title>
<style>
p{
text-decoration:line-through;
}
</style>
</head>
<body>
<p>这里有一条删除线</p>
</body>
</html>Rendering:
Description:
line-through attribute value: defines a line that passes under the text .
As can be seen from the example, by setting text-decoration:line-through; to add a strikethrough to the text in the
tag, the method is simple and convenient. And you can simply modify the strikethrough style through css settings, such as: color, for example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css添加文本文字的删除线</title>
<style>
p{
text-decoration:line-through;
color: red;
}
span{
color: black;
}
</style>
</head>
<body>
<p><span>这里有一条删除线</span></p>
</body>
</html>Rendering:
 "153906489530582How to add strikethrough in css? css text-decoration attribute sets strikethrough (code example)")
In this way we Combining text-decoration: line-through; and styles to define the text font color style, you can achieve the style effect of different strikethrough and text colors in CSS. Isn’t it very simple!
Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit CSS Video Tutorial!
Related recommendations: php public welfare training video tutorial
The above is the detailed content of How to add strikethrough in css? css text-decoration attribute sets strikethrough (code example). For more information, please follow other related articles on the PHP Chinese website!