Изменить цвет последней буквы

Ответ 1

Без использования javascript ваш единственный вариант:

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

Изменить для ссылки на скрипт:

Я не уверен, почему вы сказали, что вам не нужен javascript-решение, так как у вас его уже совсем немного. Несмотря на это, в этом примере вам нужно сделать только пару небольших изменений. Измените строку 10 из

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

к

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

Обратите внимание, что теперь важно использовать .html() вместо .text(), так как на самом деле происходит стилизация.

Рабочая скрипка: http://jsfiddle.net/QTUsb/2/

Ответ 2

Все говорят, что это невозможно. Я здесь, чтобы доказать обратное.

Да, может выполнить .

Хорошо, так что это ужасный взлом, но это можно сделать.

Нам нужно использовать две функции CSS:

• Во-первых, CSS предоставляет возможность изменять направление потока текста. Обычно это используется для скриптов, таких как арабский или иврит, но фактически работает для любого текста. Если мы используем его для текста на английском языке, буквы отображаются в обратном порядке, чтобы они отображались в разметке. Таким образом, чтобы текст отображался как слово "String" на обратном элементе, нам нужно было бы разметку, которая читает "gnirtS".

• Во-вторых, CSS имеет селектор псевдоэлементов ::first-letter, который выбирает первую букву в тексте. (другие ответы уже установлены, что это доступно, но нет эквивалентного селектора ::last-letter)

Теперь, если мы объединим ::first-letter с обратным текстом, мы можем выбрать первую букву "gnirtS", но похоже, что мы выбираем последнюю букву "String".

Итак, наш CSS выглядит так:

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

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

и HTML:

<div>gnirtS</div>

Да, это сработает - здесь вы можете увидеть рабочую скрипту: http://jsfiddle.net/gFcA9/

Но, как я уже сказал, это немного хаки. И кто хочет тратить свое время на все? Не совсем практическое решение, но оно отвечает на вопрос.

Ответ 3

Использовать псевдоэлемент ::after в сочетании с attr():

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>

Ответ 4

Другим решением является использование ::after

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

Это решение позволяет изменять цвет всех символов, а не только буквы, похожие на ответ от Spudley, который использует ::first-letter. Подробнее см. ::first-letter спецификацию. ::first-letter применяется только на буквах, в которых игнорируются символы пунктуации.

Кроме того, если вы хотите покрасить больше, чем последний символ, вы можете:

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

Для получения дополнительной информации о:: после проверки этой ссылки.

Ответ 5

Это может быть достигнуто с использованием только CSS и псевдоэлемента ::after без каких-либо изменений в 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>

Ответ 6

В каком виде вы "показываете строковое письмо буквой"? Если вы зацикливаете символы в строке (переменной), вы можете сказать, когда находитесь в последней букве, и оберните ее в том ли это на стороне сервера или на стороне клиента.

Глядя на скрипты, прикрепленные к еще одному из ваших вопросов...

Если это то, о чем вы говорите, вам может потребоваться установить .innerHTML этого элемента вместо element.text()

Из скрипта в http://jsfiddle.net/SLKEn/ вы измените ее на что-то вроде этого

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

вместе с CSS span.lastchar { color: red; }

Обновление: рабочая скрипка по вашему другому вопросу.

Ответ 7

$(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;
}