22

HTML

<progress max="100" value="80" data-value="5"></progress>

CSS

progress { margin: 50px; width:250px; border:0; }

CSS (試行 1)

progress:before, progress:after { content: attr(data-value); }

CSS (試行 2)

progress::-webkit-progress-bar:before,
progress::-webkit-progress-bar:after { content: attr(data-value); }

progress::-moz-progress-bar:before,
progress::-moz-progress-bar:after { content: attr(data-value); }

CSS (試行 3)

progress::-webkit-progress-value:before,
progress::-webkit-progress-value:after { content: attr(data-value); }

progress::-moz-progress-value:before,
progress::-moz-progress-value:after { content: attr(data-value); }

上記の試みはどれも成功しませんでした。:beforeまた、との異なる CSS コード ブロックを使用して、上記の各バージョンを試しました:after。

目的

<progress>HTML5要素の前後に CSS で生成されたコンテンツを挿入します。これは可能ですか？

JsFiddle デモ

http://jsfiddle.net/pankajparashar/MNL2C/

アップデート

次のCSSを使用すると機能します。

progress::-webkit-progress-bar:before,
progress::-webkit-progress-bar:after { content: '123'; }

結論

どうやら、CSS に静的コンテンツを挿入すると、機能するようです。しかし、コンテンツを使用する場合はそうdata-*ではありません。

4

3 に答える 3

2 
<progress></progress>

CSS を微調整するだけで、テキストは受け入れられません。

HTML:

<progress max="100" value="80" data-value="80"></progress>
<span class="percentage">80% Done</span>

CSS:

progress { margin: 0px; width:250px; border:0; }

/* CSS (Attempt 1) */

    progress:before, progress:after { content: attr(data-value); }

/* CSS (Attempt 2) */

    progress::-webkit-progress-bar:before,
    progress::-webkit-progress-bar:after { content: attr(data-value); }

    progress::-moz-progress-bar:before,
    progress::-moz-progress-bar:after { content: attr(data-value); }

/* CSS (Attempt 3) */

    progress::-webkit-progress-value:before,
    progress::-webkit-progress-value:after { content: attr(data-value); }
    progress::-moz-progress-value:before,
    progress::-moz-progress-value:after { content: attr(data-value); }

    .percentage{
        float: left;
        margin-left:100px;
        margin-top: -20px;
        position: absolute;
        display: block;
        color: #FFF;
    }
于 2013-09-23T09:33:38.223 に答える
0

@BoltClock は正しいようです - は、実際の要素ではなく、 のシャドウ DOM 要素の属性をcontent: attr(value)探しています。value-webkit-progress-value<progress>

h4 { margin: 2em 0 0; }
progress {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
}
progress::-webkit-progress-value:before {
  position: absolute;
  right: 0;
  bottom: -125%;
}
progress.show-value::-webkit-progress-value:before {
  content: attr(value);
}
progress.show-data-value::-webkit-progress-value:before {
  content: attr(data-value);
}
progress.show-style::-webkit-progress-value:before {
  content: attr(style);
}
progress.show-pseudo::-webkit-progress-value:before {
  content: attr(pseudo);
}
<h4><code>attr(value)</code>:</h4>
<progress class="show-value" max="100" value="80" data-value="5"></progress>

<h4><code>attr(data-value)</code>:</h4>
<progress class="show-data-value" max="100" value="80" data-value="5"></progress>

<h4><code>attr(style)</code>:</h4>
<progress class="show-style" max="100" value="80" data-value="5"></progress>

<h4><code>attr(pseudo)</code></h4>
<progress class="show-pseudo" max="100" value="80" data-value="5"></progress>

于 2015-12-08T13:24:11.020 に答える