Striking through a number in an ordered list CSS/HTML

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 l开发者_如何学JAVAist, 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

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/

@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/

the list style is NOT styleable in this way - you'd have to remove the list style identifier (a,b,c etc) inside the li as content.

This is default browser behaviour and you wont be able to strike through the number/letter provided by the list. If it is possible in your situation you could hide the numbering provided by the list and add it to the list text content yourself.

You might have to take care of the numbering yourself - either manually, server-side, or some jQuery - and use an unordered list like this:

<style>
.Lower-Alpha
{
  margin-top: 2pt;
  margin-bottom: 2pt;
  text-decoration: line-through;
  list-style: none;
}
</style>

<ul>
   <li class="Lower-Alpha">a. Foo</li>
   <li class="Lower-Alpha">b. Bar</li>
</ul>

This'll render as:

a. Foo

b. Bar

It can be done as follows:

1. Create a wrapper <div> around the <ul>.

2. Style the wrapper <div> with the strikethru (or whatever other font size/style you're wanting for the list item numbers)

3. Style the <li> elements back to your normal font settings.

The list item numbers will then pick up the font settings from the parent <div>, and will have the strike-thru, and the list content will be normal text.

Note, this will only work if you want all your list item numbers styled the same way. Your question implies that this is what you want, but if you only wanted to do strike-thru on specific list items then you'd need to use @seler's solution.

You can't style the list item. It might look better this way?