CODEWITHSUNDEEP
javascriptjquerycssstyles
technopeasant
technopeasant

Reputation: 7939

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-indent:-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;
}

Upvotes: 1

Views: 1948

Answers (6)

Chandu
Chandu

Reputation: 82913

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

Try this:

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

Upvotes: 0

mazlix
mazlix

Reputation: 6293

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?"..

Upvotes: 0

mikeloyst
mikeloyst

Reputation: 1

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

Upvotes: 0

David Nguyen
David Nguyen

Reputation: 8528

<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

Upvotes: 1

Senad Meškin
Senad Meškin

Reputation: 13756

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

this can help you

Upvotes: 0

ScottE
ScottE

Reputation: 21630

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

Upvotes: 0

Related Questions