使用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>