25

質問

1 つのキャラクターの一部だけをスタイリングできますか?

意味

文字の一部に CSS 属性を割り当てることはできません。しかし、キャラクターの特定の部分だけをスタイリングしたい場合、標準化された方法はありません。

例

「X」を途中まで赤にしてから黒にすることはできますか?

期待される結果

動作しないコード

<div class="content"> 
    X
</div>

.content {
    position: relative;
    font-size: 50px;
    color: black;
}

.content:after {
    content: 'X';
    color: red;
    width: 50%;
    position: absolute;
    overflow: hidden;
}

jsFiddle のデモ

目的

icon-star私の意図は、Font Awesomeシンボルをスタイリングすることです。幅が動的なオーバーレイがある場合、スコアを正確に視覚化することはできないのでしょうか?

4

2 に答える 2

10

デモフィドルで遊んでいるときに、自分でそれを理解し、解決策を共有したいと思いました。とても簡単です。

まず最初に:デモ

1 つの文字を部分的にスタイルするには、コンテンツに追加のマークアップが必要です。基本的に、それを複製する必要があります：

<​div class="content"> 
    <span class="overlay">X</span>
    X
</div>

:after や :before などの疑似要素を使用する方が適切ですが、それを行う方法が見つかりませんでした。

オーバーレイはコンテンツ要素に絶対に配置する必要があります:

​.content {
    display: inline-block;
    position: relative;
    color: black;
}

​.overlay {
    width: 50%;
    position: absolute;
    color: red;
    overflow: hidden;
}​

overflow: hidden;「X」の残りの部分を切り取るために忘れないでください。

代わりに任意の幅を使用できるため、50%このアプローチは非常に柔軟になります。カスタムの高さ、他の CSS 属性、または複数の属性の組み合わせを使用することもできます。

拡張デモ

于 2012-06-17T10:42:27.800 に答える
5

あなたのソリューションで素晴らしい仕事。:afterChrome 19 で動作する (HTML のコンテンツを複製する代わりに)を使用するバージョンがあります。

基本的：

  1. position:relativeオンに設定.content
  2. :after絶対位置
  3. :afterに設定overflow:hidden
  4. の幅、高さ、テキストのインデント、および行の高さを調整して、:afterビットを非表示にします。

ただし、クロスブラウザーでうまく機能するかどうかはわかりません。em値はおそらく少し異なる方法で機能するでしょう。(明らかに、IE 7 以下では動作しません。)

さらに、HTML の代わりに CSS ファイルのコンテンツを複製する必要があり、状況によっては最適ではない可能性があります。

于 2012-06-21T07:29:43.583 に答える