CSS for Changing Color of Last Word in H1

CSS for changing color of last word in h1

This is not possible with pure CSS. However you can use lettering.js to get a ::last-word selector. CSS-Tricks has an excelent article on this: CSS-Tricks: A call for nth-everything. You can then do the following:

h1 {
  color: #f00;
}

/* EDIT: Needs lettering.js. Please read the complete post,
 * before downvoting. Instead vote up. Thank you :)
 */
h1::last-word {
  color: #00f;
}

how to style the last word in the title with underline

You can use javascript to split the content of the title and wrap the last word in a span to style it with a border-bottom.

In the example I show you how to do it with a reusable funcion that will wrap the last word no matter the size of the string.

function underlineLastWord(element)
{
    var pieces = element.innerHTML.split(" ");
    var last = pieces.pop();
    var first = pieces.join(" ");
    element.innerHTML = first + "<span> " + last + "</span>";
}

var elements =  document.querySelectorAll(".underline-end");
elements.forEach(x => underlineLastWord(x));

  .underline-end > span {
    padding-bottom: 2px;
    border-bottom: 5px solid blue;
 }

<h1 class="underline-end">Sign in up<h1>
<h1 class="underline-end">Sign in<h1>
<h1 class="underline-end">Sign<h1>
<h1 class="underline-end">Something even longer<h1>

Change last letter color

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

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/

How to select a first word of the last line of text? ( h1 - h6 , p elements)

EDIT

This was a nice challenge!

It takes 4 loops to achieve what you ask.

To add a span on each words.
To find the offset of the span on the last line.
To remove spans on all lines except the last.
To remove spans on all words except the first.

CodePen

See comments in code (I left all my debugging console.logs).

$(function () {  $('h1, h2, h3, h4, h5, h6').each(function () {
    x = parseInt($(this).css('font-size'));    $(this).css('line-height', (x + 20) + 'px');
    findWord($(this));
  });
  function findWord(el){
    // Get the word array.    var wordArr = el.html().split(" ");
    // Cycle words to add span on each words.    for(i=0;i<wordArr.length;i++){      console.log(wordArr[i]);      wordArr[i] = "<span class='underliner'>"+wordArr[i]+"</span>";    }
    // Update HTML.    el.html(wordArr.join(" "));
    // Find the offset of the last line.    var biggestOffset=0;    el.find(".underliner").each(function(){      console.log($(this).offset().top);      if($(this).offset().top>biggestOffset){        biggestOffset=$(this).offset().top;      }    });
    console.log("biggestOffset: "+biggestOffset);
    // Remove span on NOT the last line    el.find(".underliner").each(function(){      if($(this).offset().top<biggestOffset){        $(this).replaceWith($(this).html());      }    });
    // On the last line, remove all spans except on the first word    el.find(".underliner").not(":eq(0)").each(function(){      $(this).replaceWith($(this).html());    });  }});

h1, h2, h3, h4, h5, h6 {  text-transform: uppercase;  color: #000;  margin-top: 0;  margin-bottom: 2rem;  font-weight: 800;  /*color: #333;*/  display: inline-block;  position: relative;  text-rendering: optimizeLegibility;  font-family: $altfont;  position: relative;    text-align:center;  /* ADDED */    /* REMOVED */  /*&:after {    content: '';    position: absolute;    bottom:0;    left:0;    width: 60px;    height: 4px;    background-color: &yellow;  }*/}
.underliner{  text-decoration:underline;  text-decoration-color: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>This is a quite long H1 that will certainly wrap</h1><h2>This is a quite long H2 that will certainly wrap</h2><h3>This is a quite long H3 that will certainly wrap</h3><h4>This is a quite long H4 that will certainly wrap</h4><h5>This is a quite long H5 that will certainly wrap</h5><h6>This is a quite long H6 that will certainly wrap</h6>

Changing the color of the last character of a word with a javascript loop

You can do:

document  .querySelectorAll('#pColors p')  .forEach(p => {    const len = p.innerText.length - 1    p.innerHTML = `${p.innerText.slice(0, len)} <span class="red">${p.innerText[len]}</span>`  })

.red { color: red; }

<section id="pColors">   <h1>Name</h1>
   <p>John</p>   <p>Jacques</p>   <p>Peter</p>   <p>Robert</p></section>

Keep last word and image on same line

I added a negative right margin to the <a> elements, to match the image width.

This prevents the images from triggering a line wrap.

The line will only wrap if the text itself doesn't fit.

This works best in contexts where the right overflow of the container will still be visible.

.text {
  font-size: 16px;
}

.text-two {
  width: 118px;
}

.text a {
  margin-right: -15px;
}

<div class="text text-one">
  <p><a href="#">Customer Service <img src="https://fakeimg.pl/15x15/" alt="Sample Image"></a></p>
</div>

<div class="text text-two">
  <p><a href="#">Customer Service <img src="https://fakeimg.pl/15x15/" alt="Sample Image"></a></p>
</div>

How can the last word of an element be styled?

I guess a really crude way would be to create a way to all the words and put it in a PHP array. Then echo all the values, and if it's the last one then put the <span id="finalWord"> before and the </span> after.

EX:

Step 1: Create the array

$your_text  = "Your text goes here";
$pieces = explode(" ", $your_text);

Now you have all your data in a array. Each word is in it's object.

echo "<h1 class='featured'>";

$the_count = count($pieces);

foreach ($your_text as $i => $value) {
    $i = $i + 1;
    if ($i == $the_count) { echo "<span id='finalWord'>"; }
    echo $value;
    if ($i == $the_count) { echo "</span>"; }
}

echo "</h1>";

So basically what this code does is count how many objects are in your array and will check if the object being displayed is the last one. If it is, it will put the correct ID on it.

I just typed this code out real quick, so there could be some errors.

Coulton

CSS for Changing Color of Last Word in H1