Changing colors of word's first letter in a sentence using only css rule

Question

Changing colors of word's first letter in a sentence using only css rule. For check my code please see:

.right_img ul li::first-letter {
  color: red;
}

Fiddle Demo

And i want this:

Answer 1

如果您可以使用javascript，那么您应该尝试使用以下代码...

＆＃13;

＆＃13;

$('.capitalize').each(function(){
    var text = this.innerText;
    var words = text.split(" ");
    var spans = [];
    var _this = $(this);
    this.innerHTML = "";
    words.forEach(function(word, index){
        _this.append($('<span>', {text: word}));
    });
});

＆＃13;

.capitalize {
    text-transform: lowercase;
}

.capitalize span {
    display: inline-block;    
}

.capitalize span:first-letter {
    text-transform: uppercase !important;
    color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='capitalize'>
    SOMETHING BETTER 
    SOMETHING BETTER 
    SOMETHING BETTER 
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

::first-letter pseudo-element将仅定位元素第一行的第一个字母（在您的示例中，＆＃34; N＆＃34;，＆＃34; E＆＃34;＆amp;＆＃34 ; S＆＃34）。没有CSS选择器可以执行您要执行的操作，实现它的唯一方法是将每个单词的第一个字母包装在另一个标记中，并使用CSS来定位该标记。