1

:beforeCSS セレクターを使用して文字をリストに追加しています

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-decorationnone

前の部分ではなく、リストのテキストに下線を引くにはどうすればよいですか?

JSFIDDLE はこちら: http://jsfiddle.net/fX86Q/

補足: 私の目標は、html に何も追加せず、CSS のみのソリューションを見つけることでした。そのため、@mahatmanich (明白な) ソリューションを選択しませんでした

4

4 に答える 4

1

リストの箇条書きがそこにあるようにスタイルを設定している場合は、li:beforeの代わりにこれを使用できます 

<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-25T13:57:24.130 に答える
0

Firefox、Chrome、Opera では( fiddledisplay: inline-block )に追加できます。li:before

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-25T14:05:18.637 に答える
0

li:before 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-25T13:49:48.410 に答える