How do I leave a dash item in the middle? With <del>?

Question

I wonder how I do to use the <del> in a menu, that when clicking on it it gets the dash in the middle ("strikethrough") and without the mouse over function. only the arrow.

Answer 1

If it’s just a menu with mouseover:

You don’t even have to use the <del> ¹ nor the <strike> if only for a visual effect. See an example with CSS:

CSS:

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

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

In this example, the link is without a trace, but when you put the mouse on top, it is "cut", thanks to the text-decoration.

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

See working on JS Fiddle

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

_{2. sugestao do @mgibsonbr}

If it’s really a list where you want to mark and unmark 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 this way: first, we use checkbox to accept the effect of "on and off" when clicking on items. As the idea is that the identification be made by a dash, we hide the checkboxes with CSS, and apply the effect in their respective label.

This works well, because the label serves as proxy for the main control, when indicating the parameter for.

See working on JS Fiddle