Change the color of the final two letters in the word within h1

Question

Change the color of the final two letters in the word within h1

There is one h1 heading in my code, and it looks like this:

HTML

<h1>AwesoME</h1>

CSS

h1 {
color:#eee
}

h1:last-word {
color:#000
}

I want to only change the last two characters of the h1 text. Is it possible to achieve this using JavaScript or jQuery?

javascript jquery css

Answer 1

Answer №1

Check out this jQuery solution:

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

h1 {
  color: #eee;
}

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

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

For those who prefer vanilla JavaScript, here's an alternative solution:

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

heading.innerHTML = text.substr(0, text.length-2)          
              + '<span>'+text.slice(-2)+'</span>';

h1 {
  color: #eee;
}

h1 span {     
  color: #000;
}

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

Answer 2

Check out this jQuery solution:

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

h1 {
  color: #eee;
}

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

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

For those who prefer vanilla JavaScript, here's an alternative solution:

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

heading.innerHTML = text.substr(0, text.length-2)          
              + '<span>'+text.slice(-2)+'</span>';

h1 {
  color: #eee;
}

h1 span {     
  color: #000;
}

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

Answer 3

Answer №2

Consider implementing css :after

p {
  font-size: 16px;
}
p::after {
  content: "!";
  position: absolute;
  color: blue;
  left:10px;
}

<p>Hello World</p>

Answer 4

Consider implementing css :after

p {
  font-size: 16px;
}
p::after {
  content: "!";
  position: absolute;
  color: blue;
  left:10px;
}

<p>Hello World</p>

Change the color of the final two letters in the word within h1

Answer №1

Answer №2

Similar questions

Show and hide menu items without automatically scrolling the user back to the top of the page

ESLint encountered an error while attempting to load the configuration "next/babel" for extension

Looking to incorporate multiple accordion drop down menus on your website? Utilize a combination of HTML, CSS, and JavaScript to

Is there a way to programmatically scan through all directories and include only files with a .js extension into my Discord collection?

Angular Material's md-checkbox is a required component

Editing content directly within an ASP.NET Core MVC application through AJAX encounters a 400 error, indicating a Bad Request

API for Product Hunting

Having trouble with importing a TypeScript class: encountering a "cannot resolve" error message

Experimenting with ngModel in a Jasmine test suite

Using Three.js to apply a sprite as a texture to a spherical object

Unable to trigger event on Bootstrap 4 calendar

Experiencing difficulties installing the MEAN stack

The post function is causing an issue and displaying an error

Step-by-step guide on resolving AngularJS Issue: [$injector:modulerr]

Modify the color of the chosen option in the dropdown menu without affecting the rest of the options

A guide on changing a plus sign into a minus sign with CSS transition

CSS animation is supported on most browsers with the exception of Safari

Is it possible to use JavaScript to manage multiple instances of the same form on a single webpage?

Ways to retrieve the <select> value in AngularJS

Sharing data between a Javascript applet and a webpage: strategies for sending results from the applet back to