Strikethrough is a stylistic effect that you’ve probably seen in many text editors where a line is drawn right through the text. But did you know that we can achieve the same effect on web pages using CSS? CSS Strikethrough is a text effect implemented through CSS properties that create a horizontal line through the middle of the text.
Here is an example.
Commonly, strikethrough is used to denote text that is no longer applicable, has been deleted, or to indicate corrections. However, with CSS, the potential for strikethrough goes beyond merely crossing out text. Its versatility allows web designers to create unique and interactive effects that enhance user experiences on a webpage.
In short, CSS strikethrough is a visual cue achieved using text-decoration: line-through;, indicating text that’s been crossed out or deemed irrelevant.
This article will guide you through the essential knowledge of CSS Strikethrough, from its syntax to its creative examples, troubleshooting common problems, and best practices.
Key Takeaways:
- Explore the CSS Strikethrough effect, from basic implementation to advanced styles and interactive effects.
- Learn the syntax and various styles like dotted, dashed, and wavy strikethroughs.
- Discover creative examples like on hover, on click, gradient, and doubled strike line on text, and best practices for using CSS Strikethrough effectively.
Basic Syntax
Implementing CSS Strikethrough begins with understanding the text-decoration property. This property allows us to add a line or several lines in different positions relative to the text.
This is the basic syntax of strikethrough:
selector {
text-decoration: line-through;}In this example, the ‘selector’ represents the HTML element that you want to apply the strikethrough to. The line-through value is what triggers the strikethrough effect.
Absolutely, don’t worry at all! This comprehensive guide will walk you through the complete procedure, carefully broken down into manageable steps. No matter your level of experience, by the end of this article, you’ll gain the confidence and knowledge to successfully carry out the task at hand.
Usage
Let’s walk through applying a strikethrough to a specific text element in a webpage. I have used a simple paragraph (<p>) tag in this example:
This is the basic structure of the HTML code where I used a simple paragraph tag and also used internal CSS. You can see in the <style> tag where I’ve targeted the paragraph tag via the class attribute to apply the styling.
<!DOCTYPE html>
<html>
<head>
<style>
.strike { text-decoration: line-through;}
</style>
<body>
<p class="strike">Hello, World!</p>
</body>
</head>
</html>Output:
You can see the text “Hello, World!” will appear with a line running horizontally through its center.
Different Strikethrough Styles
Beyond the basic strikethrough, CSS also allows for a variety of line styles. These include solid (default), double, dotted, dashed, and wavy. For more granular control, you can use text-decoration-style the property as shown in this code. If you want to change the design just paste the word instead of dotted.
.strike {
text-decoration: line-through;
text-decoration-style: dotted;}If you want to try a different design, it’s super easy – just replace ‘dotted’ in the code with the type of line you want. So go ahead, experiment with it and make your text stand out!
Code Output:
Troubleshooting
Sometimes, CSS strikethrough may not display as expected. Always make sure that your CSS rules are not being overridden by others, this is a common problem that arises from the dynamic nature of CSS. Use the browser developer tools to inspect the element and see applied styles.
Remember, inline styles and main rules can override other styles, so use them sparingly and sparingly.
Best Practices
Avoid unnecessary use of strikethrough, as it can make text difficult to read. Also, keep in mind that the strikethrough may not be visible on all devices or to all users, so don’t use it for critical information.
When using different strikethrough styles, ensure it align with your overall design language. A dashed or dotted line might not look good in a design where all other lines are solid.
Examples of CSS Strikethrough
Here are some innovative and compelling examples that showcase the power of CSS text decorations. They’re designed to enhance your understanding of how the text-decoration property can be employed to give text a more visually engaging look.
Think of the text-decoration property as your magic wand, transforming the appearance of text on your web pages. It’s not just about underlining or strikethrough; with CSS, you can weave a plethora of designs to bring an element of playfulness and creative flair to your website’s typography.
Also read: Text Animation CSS
In the following examples, we’ll explore various CSS text decorations, including the standard strikethrough, double lines, dotted and dashed lines, wavy patterns, and much more. Each of these styles can create a distinct visual impact, providing you with a broad palette of effects to draw from.
More than just aesthetic appeal, these examples will illustrate how text decorations can enhance readability, guide user focus, and contribute to the overall user experience. By mastering the art of CSS text decoration, you will open up a new dimension in your web design skillset.
#1 Interactive Hover Effect:
This effect applies a strikethrough line when you hover over a text. This is useful for creating a more dynamic user experience and giving a visual cue that an element is interactive. It can be applied, for instance, to menu items or links within a page.
<!DOCTYPE html>
<html>
<head>
<style>
.hover-strike {
transition: text-decoration 0.5s linear;}
.hover-strike:hover {
text-decoration: line-through;}
</style>
<body>
<h1 class="hover-strike">Hover over me</h1>
</body>
</head>
</html>OutPut:
#2 Animated CSS Cross Out
With this effect, a strikethrough line moves across the text, usually from side to side. It can draw attention to specific text or create an appealing visual effect, especially used in promotional banners or titles.
<!DOCTYPE html>
<html>
<head>
<style>
.animated-strike {
background: linear-gradient(to left, transparent 50%, black 50%);
background-repeat: repeat-x;
background-position: 0 50%;
background-size: 200% 1px;
transition: background-position 1s;
}
.animated-strike:hover {
background-position: -100% 50%;
}
</style>
<body>
<p class="animated-strike">Hover to see the animation</p>
</body>
</head>
</html>OutPut:
#3 Gradient CSS Strikethrough
This effect uses gradient lines to strikethrough text. This can create a vibrant and distinctive effect, suitable for creative web design themes or artistic content.
<!DOCTYPE html>
<html>
<head>
<style>
.gradient-strike {
background: linear-gradient(to right, red, orange, yellow, green, blue);
-webkit-background-clip: text;
color: transparent;
text-decoration: line-through;
}
</style>
<body>
<p class="gradient-strike">I'm colorful</p>
</body>
</head>
</html>OutPut:
#4 Dynamic CSS Text line
For an extra dynamic effect, use a strikethrough that responds to user actions, such as appearing when a checkbox is ticked.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: #EAE7DB;}
</style>
<body>
<input type="checkbox" id="check">
<p id="dynamic">This is a dynamic strikethrough text.</p>
<!--This is JavaScript code -->
<script>
document.getElementById("check").addEventListener("change", function() {
document.getElementById("dynamic").style.textDecoration = this.checked ? "line-through" : "none";
});
</script>
</body>
</head>
</html>Output:
#5 Transition text-decoration
This effect involves a transition in the color of the text line when the user hovers over the text, offering an engaging user experience.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: #EAE7DB;}
.transition-strike {
text-decoration: line-through;
text-decoration-color: red;
transition: text-decoration-color 1s ease;}
.transition-strike:hover {
text-decoration-color: blue;}
</style>
<body>
<p class="transition-strike">Hello, World!</p>
</body>
</head>
</html>Output:
#6 Font Style Strikethrough CSS
This application includes custom fonts, allowing the line to be integrated more seamlessly with the overall design of your website.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: #EAE7DB;}
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
.font-strike {
font-family: 'Lobster', cursive;
text-decoration: line-through;}
</style>
<body>
<p class="font-strike">Hello, World!</p>
</body>
</head>
</html>Output:
How Do You Set a Double Line Through Text in CSS?
To apply a double line through text in CSS:
- Use the
text-decorationproperty with the valueline-through. - Add the
text-decoration-styleproperty with the valuedouble.
<!DOCTYPE html>
<html>
<head>
<style>
.double-strike {
text-decoration: line-through;
text-decoration-style: double;
}
</style>
<body>
<p class="double-strike">This text has a double line through it.</p>
</body>
</head>
</html>Output:
#7 Advanced CSS Strikethrough Using JavaScript
In this code, I have created a countdown that goes from 10 to 0. When the countdown hits 0, a line is added using CSS animations for a smooth effect. This example demonstrates the dynamic capabilities of combining JavaScript and CSS to create advanced strikethrough effects.
Html Code:
<div id="countdown">10</div>CSS Code:
@keyframes strikeThrough {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.strike {
position: relative;
}
.strike:after {
content: " ";
position: absolute;
top: 50%;
left: 0;
width: 0;
height: 1px;
background: red;
animation: strikeThrough 2s forwards;
}JavaScript Code:
let countdown = document.getElementById("countdown");
let timeLeft = 10;
let countdownInterval = setInterval(function() {
timeLeft--;
countdown.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(countdownInterval);
countdown.classList.add("strike");
}
}, 1000);OutPut:
How to Strike through Obliquely with CSS?
To strike through text obliquely with CSS, you can use a combination of CSS properties on a pseudo-element. First, you create a container for your text and apply a relative position to it. Then, you create a pseudo-element using ::after. This pseudo-element is positioned absolutely within the container and given a border-top property to create the line. The line is then rotated to create the oblique effect using the transform property. The transform-origin property is set to center ensure the line rotates from its center.
Here’s an example of how you can implement this:
<!DOCTYPE html>
<html>
<head>
<style>
.strike-through {
position: relative;
display: inline-block;
font-weight: 500;
}
.strike-through::after {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
border-top: 2px solid black;
transform: rotate(-9deg);
transform-origin: center;
}
</style>
</head>
<body>
<h1 class="strike-through">obliquely.</h1>
</body>
</html>Tip: You can adjust the angle of the strikethrough line by changing the degree value in the transform: rotate(-9deg); property. The -9deg value can be increased or decreased to make the line more or less steep. For example, transform: rotate(-15deg); will make the line steeper, while transform: rotate(-5deg); will make it less steep. Experiment with different values to achieve the desired effect.
Also read: 3D Animated Text Effect
FAQs
How do you add a strikethrough in CSS?
To add a strikethrough in CSS, use the text-decoration property with the value line-through. For example: text-decoration: line-through;.
How to strikethrough CSS in JavaScript?
In JavaScript, you can apply a strikethrough to an element by setting its textDecoration style to line-through. For instance: element.style.textDecoration = "line-through";.
How do you style a strikethrough in HTML?
In HTML, the <del> tag represents text that has been deleted or struck through. To style it further, combine it with CSS, like: <del style="color: red;">struck text</del>.
How do I apply the strikethrough effect?
To apply the strikethrough effect in CSS, utilize the text-decoration property set to line-through: text-decoration: line-through;.
How do I change the color of a strikethrough in CSS?
To change the color of a strikethrough in CSS, you’ll need to change the text color itself. For a red strikethrough, use: text-decoration: line-through; color: red;.