Home  >  Article  >  Web Front-end  >  How to set color for strikethrough in css

How to set color for strikethrough in css

青灯夜游
青灯夜游Original
2021-04-14 18:21:083893browse

Method: First embed the span tag containing text in the parent tag p; then add a strikethrough style in the parent tag p, and use the color attribute to set the color of the text and strikethrough; finally use in the span tag The color attribute can reset the text color.

How to set color for strikethrough in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In css, you can add the strikethrough effect of text with the text-decoration attribute

<!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:

How to set color for strikethrough in css

So how to set the color of the strikethrough? Let’s take a look at the sample code:

<!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:

How to set color for strikethrough in css

In this way we combine text-decoration: line-through;and The style defines the style of the text font color, and you can achieve the style effect of different colors of strikethrough and text in CSS. Isn’t it very simple!

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set color for strikethrough in css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn