Remove li text while leaving list-style

I've got an unordered list with a list style using indented dots. I'd like to maintain those dots but remove the text from view. I originally guessed that I could simply set text-ind开发者_运维知识库ent:-999px; but that removes the dot as well.

Any recommendations?

I know that it will work if the text inside the li is set to &nbsp, but that feels like cheating.

HTML

<div id="page_nav">
  <ul>
    <li class="showlink" id="show_one">PAGE ONE</li>
    <li class="showlink" id="show_two">PAGE TWO</li>
    <li class="showlink" id="show_three">PAGE THREE</li>
  </ul>
</div>

CSS

#page_nav ul{
    margin:0;
    display:block;
}
#page_nav li{
    width:15px;
    height:15px;
    margin:0 0 0 5px;
    float:left;
    font-size:3.5em;
}

<li><span class="list_item">Item</span></li>

.list_item { display: none; }

some context as to why you are hiding the text would help answer the question

How about using a span inside the list item with display:block, and setting text-indent on the span?

$('li.your_style').each(function()
{
  $(this).html($(this).html().toString().replace(/([^\.]+)/g,''));
});

this can help you

All you need to do is leave a blank <li></li> and that will display the dots without any text

We need to know why you want this... the context...

Wo you want something to happen later that makes the text visibile? If so, you should put all the text within the <li> in a <span> that is visibility:hidden then upon wanting it to be displayed/read you should make it visible..

If you want to maintain the dot but lose the text... what would you want the screen reader to say? "dot?"..

If you really don't want to set the text to a   then you could use wrapInner as follows:

Try this:

    $(function(){
        $("li.showlink").wrapInner("<span style='display:none'></span>");
    });