スタイル付きコンポーネントとCSS attrの（）を使用

Question

私はそうのように、CSSのコンテンツattr機能を使用してSVGの円内のパーセンテージの数字を入れしようとしている：

は

content: attr(data-percent)%;

擬似要素は表示されませんStyledコンポーネントは最後に%を処理できないように見えるためです。私はそれを削除する場合は動作しますが、番号は20%と表示され、この形式は通常のCSSに有効です。

ここに欠けているものがあるのですか、それともライブラリの制限ですか？

const Div = styled.div` 
    position: relative; 
    width: 100%; 
    height: 100%; 
    &:after { 
    content: attr(data-percent)%; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    } 
`; 

render() { 
    return (
     <Div data-percent={20}> 
     <sgv viewBox="0 0 120 120"> 
      <circle cx="60" cy="60" r="50" fill="none" strokeWidth="10" strokeLinecap="round"/> 
     </svg> 
     </Div> 
    ); 
    } 

Answer 1

%記号はそうのような文字列とのattr（）の値から分離する必要があります：

content: attr(data-percent) "%"; 

それとも、代わりにCSSスタイル

のデータ属性にパーセント記号を入れます

data-percent="20%" 

デモ

div { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
div:after { 
 
    content: attr(data-percent) "%"; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div data-percent="20"> 
 
    <svg viewBox="0 0 120 120"> 
 
    <circle cx="60" cy="60" r="50" fill="none" strokeWidth="10" strokeLinecap="round" /> 
 
    </svg> 
 
</div>