Change last letter color

Question

Example code:

string

I want to change the color on the last letter, in this case \"g\", but I need soluti

Answer 1

Another solution is to use ::after

.test::after{
    content: "g";
    color: yellow;
}
<p class="test">strin</p>

This solution allows to change the color of all characters not only letters like the answer from Spudley that uses ::first-letter. See ::first-letter specification for more information. ::first-letter applies only on letters it ignores punctuation symbols.

Moreover if you want to color more than the last character you can :

.test::after{
     content: "ing";
     color: yellow;
}
<p class="test">str</p>

For more information on ::after check this link.

Answer 2

$(document).ready(function() {
  var str=$("span").text();
  strArr=str.split("");
  for(var key=0;key<=strArr.length-1;key++) {
    if(key==strArr.length-1) {
      var newEle="<span id='lastElement'>"+strArr[key]+"</div>";
      strArr[key]=newEle;
    }
  }
  var newtext=strArr.join("");
  $("span").html(newtext);  
});

  
span#lastElement {
  color: red;
}