web-dev-qa-db-fra.com

Changer la couleur de la dernière lettre

Exemple de code:

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

Je veux changer la couleur sur la dernière lettre, dans ce cas "g", mais j'ai besoin d'une solution avec CSS, je n'ai pas besoin d'une solution javascript.

J'affiche la chaîne lettre par lettre et je ne peux pas utiliser de solution statique.

htmlcsshtml5css3
23
user1979270

Sans utiliser javascript, votre seule option est:

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

Edit pour votre lien de violon:

Je ne sais pas vraiment pourquoi vous avez dit que vous n'aviez pas besoin d'une solution javascript, car vous en avez déjà pas mal. Quoi qu'il en soit, dans cet exemple, vous ne devez apporter que quelques modifications mineures. Changer la ligne 10 de

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++]);
}

Notez qu'il est important d'utiliser .html() au lieu de .text() maintenant, car un balisage HTML est en train d'être inséré.

Violon de travail: http://jsfiddle.net/QTUsb/2/

9
David Kiger

Utilisez le pseudo-élément ::after associé à 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>

30
Supersharp

Une autre solution consiste à utiliser ::after

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

Cette solution permet de changer la couleur de tous les caractères, pas seulement des lettres comme la réponse de Spudley qui utilise ::first-letter. Voir ::first-letterspécification pour plus d'informations. ::first-letter s'applique uniquement aux lettres pour lesquelles il ignore les signes de ponctuation. 

De plus, si vous voulez colorer plus que le dernier caractère, vous pouvez:

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

Pour plus d'informations sur :: après vérification de ce link .

17
Marc_Alx

Cela pourrait être réalisé en utilisant uniquement CSS et un pseudo-élément ::after sans aucune modification du code 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>

5
Jastrzebowski

De quelle manière "affichez-vous la chaîne lettre par lettre"? Si vous parcourez les caractères d'une chaîne (variable), vous pouvez certainement savoir quand vous en êtes à la dernière lettre et l'envelopper si vous le faites du côté serveur ou du côté client.

En regardant les violons attachés à une autre de vos questions ...

Si c'est ce dont vous parlez, vous devrez peut-être définir le .innerHTML de l'élément au lieu de element.text()

Du violon à http://jsfiddle.net/SLKEn/ vous le changeriez en quelque chose comme ceci

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

avec CSS span.lastchar { color: red; }

Mise à jour: travail de violon basé sur votre autre question.

1
Stephen P

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

0
shaan gola

je n'ai pas la possibilité de commenter un fil de réponse, mais je voulais signaler une erreur dans un réponse fourni par Marc_Alx qui, sinon, fonctionne à merveille. cette solution n'a fonctionné pour moi qu'après avoir ajouté un point-virgule derrière la propriété content ... de sorte qu'il ressemble à content:"ing";

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