CSSコンテンツプロパティ - CSSを使用してattrを大文字に設定

Question

注：XMLを変更することは一切できません。可能であれば、この変更はCSSを使用して行う必要があります。また、CSSに関しては、私は初心者であることに注意してください。

XMLの次のスニペットは、私が持っているものの一例である：

<example type="f"> blah blah blah</example> 

とCSSのスニペット

example 
{ 
    content: "Example type " attr(type) ": "; 
} 

予想通りこれは出力を生成します

例タイプFを：

CSSを使用してattrを大文字に設定することはできますか？次...多分にインラインCSSを使用して...

例タイプFのように：

ノー成功/ wは例えば、いくつかのことを試してみました。

example.attr { 
    text-transform: uppercase; 
} 

すべてのヘルプは

がcontentプロパティは、疑似要素にのみ適用され、あなたに

Answer 1

ありがとういただければ幸いです。

だからあなたのコードは次のようになります。

example::before 
{ 
    content: "Example type " attr(type) ": "; 
} 

これはtext-transform:uppercaseに設定することができますが、それは全体content文字列だけでなく、属性に適用されます。

example::before { 
 
    content: "Example type " attr(type)": "; 
 
    text-transform: uppercase; 
 
    color: red; 
 
}

<example type="f">blah blah blah</example>

Answer 2

contentプロパティは擬似要素と共に使用されるべきコンテンツ。

コンテンツのCSSプロパティは要素内のコンテンツを生成する擬似要素の後に前と::と::使用されている：MDNドキュメントを引用する

。

example:before { 
 
    content: "Example type " attr(type)": "; 
 
    text-transform: uppercase; 
 
}

<example type="f">blah blah blah</example>

：

_source

example:before { 
 
    content: "Example type " attr(type)": "; 
 
}

<example type="f">blah blah blah</example>

次に、あなたがpusedo要素にしたいスタイルを適用することができます

あなたはだけ attrが大文字になりたい場合は、あなたががだけafter擬似要素と位置も使用することができます。

example { 
 
    position: relative; 
 
    display: block; 
 
} 
 
example:before { 
 
    content: "Example type "; 
 
    display: block; 
 
} 
 
example:after { 
 
    content: attr(type)": "; 
 
    text-transform: uppercase; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 93px; 
 
}

<example type="f">blah blah blah</example>

を私は必ずしもそれをお勧めしませんしかし、それを行うことができます。