鋰套裝風格：前

我加入與:before CSS選擇一個字符列表鋰套裝風格：前

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

我想強調的列表項的內容而不是內容，所以我說前：

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

然而:before部分仍然得到，即使其text-decoration強調設置爲none。

如何強調列表文本而不是之前的部分？

的jsfiddle這裏：http://jsfiddle.net/fX86Q/

邊注：我的目標是不添加任何東西到HTML，找到一個CSS唯一的解決辦法。這就是爲什麼我沒有選擇@mahatmanich（明顯）解決方案

來源

2013-09-25 Horen

在firefox和chrome中，您可以將'display：inline-block'添加到'li：before'。 – canon

@canon：是的，也可以在Opera和Safari中使用。但不是在IE10上。 – Harry

@canon這是我最喜歡的解決方案。請發表您的評論作爲答案，以便我可以接受它 – Horen

在firefox，chrome和opera中，您可以將display: inline-block添加到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%; 
}

雖然這在IE中不起作用。

來源

2013-09-25 14:05:18 canon

這很糟糕不是嗎？有多少IE程序員需要更換燈泡？答：沒有，他們將黑暗定義爲新的標準：D – mahatmanich

由於li風格總是應用於整個<li>元素，你需要使用另一個HTML元素像<span>的<li>內部和應用

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：

更妙的是無類： http://jsfiddle.net/fX86Q/8/

來源

2013-09-25 13:40:04 mahatmanich

謝謝 - 這是一個很好的解決方案，但我明確尋找一個解決方案，使用'：before'選擇器 – Horen

就像感興趣的事情一樣，爲什麼要給列表項加下劃線？當然，這應該是一個錨鏈接？ –

好吧，試試它與類而不是http://jsfiddle.net/fX86Q/7/ – mahatmanich

更新李：之前CSS部分

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

這解決您的問題。的jsfiddle鏈接http://jsfiddle.net/SqkjF/

來源

2013-09-25 13:49:48 Sudharsun

不在IE中<= 10。這就是爲什麼我沒有發佈它作爲答案。 – canon

會檢查它。但爲我工作。＆沒看到你的評論 – Sudharsun

如果你是造型方式列表子彈那裏你可以你這不是李：以前

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

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

希望這有助於呢！ jsFiddle鏈接http://jsfiddle.net/xWwXq/

來源

2013-09-25 13:57:24 Sudharsun

明確與：在他說之前！ – mahatmanich

@mahatmanich，我剛剛給了一個建議。 – Sudharsun

這是一個不錯的解決方案;-) 1up，但不是他想要的！ – mahatmanich

鋰套裝風格：前

回答

相關問題