1

単一の要素で次の結果を生成したい: 

<style type="text/css">
    div { background-color: #000; color: #fff; }
    span { border-bottom: 1px solid #f00; }
</style>
<div><span>White text, red underline, black background</span></div>

jFiddle: http://jsfiddle.net/ARbmG/

これは可能ですか？

4

3 に答える 3

2

関連 : CSS テキスト装飾の下線の色 と 下線の色の変更

いいえ、クロスプラットフォーム、クロスブラウザの方法でテキスト装飾の下線の色を「まだ」変更することはできません。

Mozilla の解決策:

span {
    color:#fff;
    text-decoration: underline;
    -moz-text-decoration-color: red;
    /* you'll have to search for other -proprietary selectors */
}

それ以外の場合は、インライン要素を下にボーダー化します: やっただけです。

于 2013-03-05T18:06:04.327 に答える
2

私はいくつかのことを試してみましたが、この奇妙な小さなものを思いつきました. これはお勧めできないかもしれませんが、HTML タグを 1 つだけ使用するだけで、目的に非常に近いものになります。

HTML

<span>White text, red underline, black background</span>

CSS

span {
    color: white;
    background: black;
    border-bottom: 2px solid red;
}

span:after {
    content: '_';
    position: absolute;
    width: 100%;
    background: black;
    color: black;
}

デモ

http://jsfiddle.net/uWGx5/

于 2013-03-05T18:23:27.510 に答える
0

さらに良い解決策を見つけました。

私の例 (白いテキスト、赤い下線、黒い背景) は 100% 正確ではありませんでした。「ブロック」要素である必要がありますが、背景は透明にすることができます。

ここに新しいものがあります： http://jsfiddle.net/gpNZX/2/

マジックは :before と :after '\A' で、これはエスケープされた ASCII 改行です。{ content:' '; も使用してみました。表示ブロック; しかし、すべてのブラウザで 100% 動作するわけではないようです。 

span {
    ...
    display: inline;
    ...
}
span:before {
    content: '\A';
    white-space: pre;
}
span:after {
    content: '\A';
    white-space: pre;
}
于 2013-03-07T02:51:30.657 に答える