將標簽的首字母大寫

Question

編輯：

這似乎是徒勞的嘗試，因為如果存在偽元素，似乎沒有辦法使第一個字母大寫，並且不幸的是，偽元素無法移動或刪除，如下所示希望如此。 無論如何，非常感謝您的所有幫助。

---

我附上了一個代碼示例，目的只是為了使事情變得簡單一些。

我想知道我是否正確執行此操作，或者這是徒勞的嘗試。 真希望如此簡單的事情不需要JavaScript。

非常感謝您提供任何見解！

 label span:before { display: inline-block; content: " "; width: 10px; height: 10px; margin-right: 10px; border: 1px solid #333; } label { text-transform: lowercase; } label::first-letter { text-transform: uppercase; } 

 <label> <span> TESTING </span> </label> 

Answer 1

您必須將第一個字母大寫，其余單詞小寫。 您還需要使標簽顯示：inline-block;

jsfiddle： http : //jsfiddle.net/afg3eegs/1/

 label { display: inline-block; text-transform: lowercase; } label::first-letter { text-transform: uppercase; } 

 <label> <span> TESTING </span> </label> 

希望這可以幫助。

Answer 2

在這種情況下，為了使<span>元素的首字母大寫，您需要將::before偽元素移動到<label>並在<span>上使用::first-letter偽元素<span>相反：

 label:before { display: inline-block; content: " "; width: 10px; height: 10px; margin-right: 10px; border: 1px solid #333; } label, label span { text-transform: lowercase; display: inline-block; } label span::first-letter { text-transform: uppercase; } 

 <label> <span> TESTING </span> </label> 

注意， ::first-letter偽元素不適用於不可替換的內聯級別元素。

Answer 3

試試這個，它應該為您工作。

label {
  text-transform: capitalize;
}

Answer 4

如果文字“ TESTING”已經大寫，就我所知，您無法使用css將其大寫。 您應該嘗試使用javascript做到這一點。 或者您可以嘗試使用上面建議的display：inline-block屬性。