CODEWITHSUNDEEP
css
Horen
Horen

Reputation: 11382

Set style for li:before

I'm adding a character with the :before CSS selector to a list

li:before {
    content: "■";
    font-size: 10px;
    margin-left: -14px;
    padding-right: 8px;
    text-decoration: none !important;
    vertical-align: 20%;
}

I want to underline the content of the list item but not the content before so I added:

li {
    cursor: pointer;
    text-decoration: underline;
}

However the :before part still gets underlined even though its text-decoration is set to none.

How can I underline the list text but not the before part?

JSFIDDLE here: http://jsfiddle.net/fX86Q/

Side note: My goal was not to add anything to the html and find a CSS only solution. That's why I didn't choose @mahatmanich (obvious) solution

Upvotes: 1

Views: 8670

Answers (4)

canon
canon

Reputation: 41695

In firefox, chrome, and opera you can add display: inline-block to li:before (fiddle). 

li:before {
    content: "■";
    display: inline-block;
    font-size: 10px;
    margin-left: -14px;
    padding-right: 8px;
    text-decoration: none !important; /* this should no longer be necessary */
    vertical-align: 20%;
}

This won't work in IE, though.

Upvotes: 0

mahatmanich
mahatmanich

Reputation: 11033

Since the li style always applies to the entire <li> element, you need to use another html element like a <span> inside the <li> and apply

HTML:

<ul class="list">
    <li><span>Test</span></li>
    <li><span>Test</span></li>
</ul>

CSS:

li:before  {
    content: "■";
    font-size: 10px;
    margin-left: -14px;
    padding-right: 8px;
    vertical-align: 20%;
}
li span {
    cursor: pointer;
    text-decoration: underline;
}
ol, ul {
    list-style: none outside none;
}

UPDATE:

Even better without class: http://jsfiddle.net/fX86Q/8/

Upvotes: 4

Sudharsun
Sudharsun

Reputation: 761

If you are styling the way list bullets are there you can you this instead of li:before 

<ul>
    <li>item 1</li>
    <li>item 2 </li>
</ul>

ul {list-style-type: square;}
li {
    cursor: pointer;
    text-decoration: underline;
}

Hope this helps too! jsFiddle link http://jsfiddle.net/xWwXq/

Upvotes: 1

Sudharsun
Sudharsun

Reputation: 761

Update li:before CSS part

li:before {
    display: inline-block;
    content: "■";
    font-size: 10px;
    margin-left: -14px;
    padding-right: 8px;
    text-decoration: none !important;
    vertical-align: 20%;
}

This resolves your problem. jsFiddle Link http://jsfiddle.net/SqkjF/

Upvotes: 0

Related Questions