How to leave a dashed item in the middle? Com

If it's just a menu with mouseover :

You do not have to use either <del> 1 or <strike> if it's just for a visual effect. Here's an example with CSS:

CSS:

a {
    text-decoration: none;
    cursor: default;
}

a:hover {
    text-decoration: line-through;
}

In this example, the link is left empty, but when you put the mouse on it, it is "cut" thanks to text-decoration .

The cursor: default property causes the cursor to remain as the default arrow instead of the "little hand". 2

  

See working at JS Fiddle

1. as well remembered by @bfavaretto, del should only be used for items actually deleted and / or canceled from a list

2. suggestion of @mgibsonbr

If it is really a list where you want to check and uncheck items:

For this, we need to improvise using checkbox to accept the clicks:

CSS:

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

input[type=checkbox]:checked ~ label {
   text-decoration: line-through;
}

HTML:

<div><input type="checkbox" id="C1" /><label for="C1">Checkbox um</label></div>
<div><input type="checkbox" id="C2" /><label for="C2">Checkbox dois</label></div>
<div><input type="checkbox" id="C3" /><label for="C3">Checkbox três</label></div>

It works like this: First, we use checkbox to accept the "turn on and off" effect when clicking on the items. Since the idea is to identify a trace, we hide the checkboxes with CSS, and apply the effect to their respective label .

This works fine because label serves as proxy for the main control, when we indicate the parameter for .

  

See working at JS Fiddle