通过有序列表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/

Answer 3

列表样式不是这样的样式 - 你必须删除li里面的列表样式标识符（a，b，c等）作为内容。

Answer 4

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.

Answer 5

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

Answer 6

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.

Answer 7

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