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