How Do I Do an Overstrike in HTML?


The official name for doing an "overstrike" in Web pages is doing an "strike-through." Text with a strike-through effect shows a line crossing through its middle and is sometimes used to show "deleted" text. Since this effect is a decoration added to text, it is an option for the "text-decoration" property in Cascading Style Sheet (CSS) code. You can add CSS code directly in your HTML by using the "style" attribute inside any tag, though for small bits of text, the "<span>" tag works best.

  • Go to "Start" on the Windows taskbar and type the name of your code editor or Notepad in to the search bar. Press the "Enter" key to load the program.

  • Locate the text where you want to apply the overstrike effect. Add this text if it does not already exist.

  • Wrap the text in "<span>" tags:

    <span>This text will have an overstrike.</span>

  • Add the "style" attribute to the opening "<span>" tag and place your CSS code in there:

    <span style="text-decoration: line-through;">This text will have a strike-through.</span>

    If you know how to write selectors to "select" tags by their names, IDs or classes in CSS, you can also use the "text-decoration: line-through" property-value pair between "<style>" tags in the head of your HTML file or in an external CSS file that you link to the HTML file.

Tips & Warnings

  • Learn to write CSS selectors and embed CSS files so you can add a reusable class that lets you place overstrikes or strike-throughs wherever you like on your website. This also makes it easier to change the text's styling later on.
  • Avoid use of obsolete, non-standard HTML tags such as "<strike>". Such tags represent a mixing of content and style that make website redesigns more difficult, and as such this tag fell out of use after the introduction of HTML 4 in 1998.

Related Searches


Promoted By Zergnet


Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!