给 h1 单词的最后两个字母赋予其他颜色

Question

我有一个 h1 标签，代码看起来像这样

HTML

<h1>AwesoME</h1>

CSS

h1 {
color:#eee
}

h1:last-word {
color:#000
}

我只想更改 h1 的最后两个字母。是否可以使用 javascript 或 jQuery

Answer 1

这是一个 jQuery 解决方案：

$('h1').html(function() {
  var txt= $(this).text();
  return txt.substr(0, txt.length-2)          //all but the last two characters
         + '<span>'+txt.slice(-2)+'</span>';  //put last two characters in a span
});

h1 {
  color:#eee
}

h1 span {     /* different color for span */
  color:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>AwesoME</h1>

---

这是一个普通的 JavaScript 解决方案：

var h1= document.querySelector('h1'),
    txt= h1.textContent;

h1.innerHTML= txt.substr(0, txt.length-2)          //all but the last two characters
              + '<span>'+txt.slice(-2)+'</span>';  //put last two characters in a span

h1 {
  color:#eee
}

h1 span {     /* different color for span */
  color:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>AwesoME</h1>

Answer 2

尝试使用css :after

h1 {
  color: #eee;
}
h1:after {
  content: "ME";
  position: relative;
  color: #000;
  left:-50px;
}

<h1>AwesoME</h1>