How to use CSS to achieve the effect of strikethrough and bold

In web design, special styling of text, such as strikethrough and bolding, is often necessary. CSS offers powerful styling features that make these effects easy to achieve. This article will detail how to use CSS to create strikethrough and bold effects.

Strikethrough Effect

The strikethrough effect is commonly used to mark deleted or outdated text. In CSS, we can achieve this using the text-decoration property. The text-decoration attribute has the following values:

none: Default value, no decorative line.
underline: Underline the text.
overline: Overline the text.
line-through: Strikethrough the text.

Here is a simple example code that demonstrates how to add a strikethrough effect to text:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Strikethrough Effect Example</title> 
<style> 
.del { 
text-decoration: line-through; 
} 
</style> 
</head> 
<body> 
<p>This is a normal paragraph of text. </p> 
<p class="del">This paragraph of text has a strikethrough effect. </p> 
</body> 
</html>

In the above code, the second

tag is given a class called “del” and its text-decoration property is set to line-through via CSS, achieving a strikethrough effect. After running the code, you can see that the second paragraph of text has been struck through.

Bold Effect

Bold text can be used to highlight and draw attention to content. In CSS, we can use the font-weight property to set the boldness of text. The font-weight property has the following values:

normal: The default value, normal text display.
bold: Bold text.
bolder: A thicker bold text.
lighter: A lighter bold text.

Here is a simple example code that demonstrates how to add bold effect to text:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Bold Effect Example</title> 
<style> 
.bold { 
font-weight: bold; 
} 
</style> 
</head> 
<body> 
<p>This is a normal text. </p> 
<p class="bold">This text uses bold effect. </p> 
</body> 
</html>

In the above code, give the second

The tag adds a class named “bold” and sets the font-weight property of this class to bold using CSS, thus achieving a bold effect. After running the code, you can see that the second paragraph of text is now bold.

Through the above example code, we can see that it is very simple to use CSS to achieve strikethrough and bold text effects. In actual projects, we can adjust the strikethrough and bold styles as needed to achieve better visual effects.