Striking through a number in an ordered list CSS/HTML

Question

I have an HTML ordered list, that I need to apply a strikethrough to. I have done this in CSS as below:

.Lower-Alpha {
  list-style: lower-alpha;
  margin-top: 2pt;
  margin-bottom: 2pt;
  text-decoration: line-through;
}

The issue I am having is that this strikes through the content in the list, but not the number of the list (and I need to do both).

Eg I am getting: a. struckthrough content

but I need: a. struckthrough content

Any suggestions welcome. Cheers

Answer 1

easy as pie: list-style-position: inside;

http://jsfiddle.net/seler/NWbrR/

edit: it looks like it's browser dependent behaviour. in mozilla it renders ok.

edit2: for full browser compability u can use this js script: http://jsfiddle.net/seler/32ECB/

Answer 2

@Haem; You can apply :after property

li:after{
    border-top:1px solid red;
    display:block;
    content:"";
    margin-top:-8px;
}

check the fiddle for more may be that's help you

http://jsfiddle.net/sandeep/NWbrR/4/