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

In what way do you "display the string letter by letter"? If you're looping through the characters in a string (variable) you can certainly tell when you're at the last letter and wrap it in a whether doing so on the server side or client side.

Looking at the fiddles attached to another of your questions ...

If this is what you're talking about, you might have to set the .innerHTML of the element instead of the element.text()

From the fiddle at http://jsfiddle.net/SLKEn/ you would change it to something like this

if(current < contentArray.length) {
    elem.html(
            elem.html() +
              (current == contentArray.length-1 ?
               '<span class="lastchar">' + contentArray[current++] + '</span>' :
               contentArray[current++])
             );
        }

along with CSS span.lastchar { color: red; }

---

Update: working fiddle based on your other question.

Answer 2

It could be achieved using only CSS and an ::after pseudo-element without any changes in HTML:

.test {
  font-size: 16pt;
  position: relative;
}
.test::after {
  bottom: 0;
  color: red;
  content: 'g';
  position: absolute;
  transform: translate(-100%, 0);
}

<p class="test">string</p>

Answer 3

Use ::after pseudo-element combined with attr() function:

p::after {
    content: attr(data-end) ;
    color: red ;
}
<p data-end="g">Strin</p>

p::after {
  content: attr(data-end) ;
  color: red ;
}

<p data-end="g">Strin</p>

Answer 4

Everyone says it can't be done. I'm here to prove otherwise.

Yes, it can be done.

Okay, so it's a horrible hack, but it can be done.

We need to use two CSS features:

• Firstly, CSS provides the ability to change the direction of the flow of the text. This is typically used for scripts like Arabic or Hebrew, but it actually works for any text. If we use it for English text, the letters are displayed in reverse order to how the appear in the markup. So to get the text to show as the word "String" on a reversed element, we would have to have markup that reads "gnirtS".

• Secondly, CSS has the ::first-letter pseudo-element selector, which selects the first letter in the text. (other answers already established that this is available, but there's no equivalent ::last-letter selector)

Now, if we combine the ::first-letter with the reversed text, we can select the first letter of "gnirtS", but it'll look like we're selecting the last letter of "String".

So our CSS looks like this:

div {
    unicode-bidi:bidi-override;
    direction:rtl;
}

div::first-letter {
    color: blue;
}

and HTML:

<div>gnirtS</div>

Yes, this does work -- you can see the working fiddle here: http://jsfiddle.net/gFcA9/

But as I say, it is a bit hacky. And who wants to spend their time writing everything backwards? Not really a practical solution, but it does answer the question.

Answer 5

Without using javascript, your only option is:

<p class="test">strin<span class="other-color">g</span></p>

Edit for your fiddle link:

I'm not really sure why you said you didn't need a javascript solution, since you have quite a bit of it already. Regardless, in this example, you need to make only a couple small changes. Change line 10 from

elem.text(elem.text() + contentArray[current++]);

to

if ( current == contentArray.length-1 ) {
    elem.html(elem.html() + "<span style='color:red'>"+contentArray[current++]+"</span>");
} else {
    elem.html(elem.html() + contentArray[current++]);
}

Note that it's important to use .html() instead of .text() now, since there's actually HTML markup being inserted.

Working fiddle: http://jsfiddle.net/QTUsb/2/

Answer 6

i dont have the ability to comment on an answer thread but i wanted to point out an error in an answer provided by Marc_Alx that otherwise works wonderfully. that solution worked for me only after adding a semi-colon behind the content property... so it looks like content:"ing";

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