增長：在從中心開始內容寬度之前

Question

我最近發現了以下文本進度樣式的方法，並想知道是否有一種解決方法來從中心增加元素寬度，所以文本也會填充中心而不是從左側。

body { 
 
    background-color: black; 
 
} 
 

 
p { 
 
    color: rgba(255, 255, 255, .4); 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 40px; 
 
    height: 85px; 
 
    position: relative; 
 
} 
 

 
p:before { 
 
    max-width: 100%; 
 
    width: 0; 
 
    height: 85px; 
 
    color: #fff; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
    content: attr(data-text); 
 
    display: block; 
 
    animation: background-fill 15s ease-in-out infinite forwards; 
 
} 
 
    
 
@keyframes background-fill { 
 
    0% { 
 
    width: 0; 
 
    } 
 
    100% { 
 
    width: 100%; 
 
    } 
 
}

<p data-text='Text'>Text</p>

Answer 1

可以實現通過動畫也和lefttext-indent

我也改變了你的p顯示爲inline-block的，所以它的動畫文字和沒有空格。

感謝Gaby aka G. Petrioli，它出現的Firefox有問題，有百分之爲主text-indent，所以我增加了一個CSS破解克服。並再次感謝蓋比，他現在刪除的答案，即解決了Firefox的問題（儘管很遺憾未能在IE）

body { 
 
    background-color: black; 
 
} 
 

 
p { 
 
    color: rgba(255, 255, 255, .4); 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 40px; 
 
    height: 85px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
p:before { 
 
    max-width: 100%; 
 
    width: 0; 
 
    height: 85px; 
 
    color: #fff; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
    content: attr(data-text); 
 
    display: block; 
 
    animation: background-fill 5s ease-in-out infinite forwards; 
 
} 
 
    
 
@keyframes background-fill { 
 
    0% { 
 
    left: 50%; 
 
    text-indent: -50%; 
 
    width: 0; 
 
    } 
 
    100% { 
 
    left: 0; 
 
    text-indent: 0; 
 
    width: 100%; 
 
    } 
 
} 
 

 
/* Begin - Firefox bug fix */ 
 
@supports (-moz-appearance:meterbar) and (display:flex) { 
 
    p:before { 
 
    width: auto; 
 
    right: 50%; 
 
    left: 50%; 
 
    display: flex; 
 
    justify-content: center; 
 
    } 
 
    @keyframes background-fill { 
 
    0% { 
 
     right: 50%; 
 
     left: 50%; 
 
    } 
 
    100% { 
 
     right: 0; 
 
     left: 0; 
 
    } 
 
    } 
 
} 
 
/* End - Firefox bug fix */

<p data-text='Text'>Text</p>

---

的CSS破解的替代，是一個小的腳本，在頁面加載時，測量元素的實際寬度，並將text-indent設置爲px而不是%。