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++]);
to
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
Related Topics
Self-Closing Tags (Void Elements) in HTML5
How to Center the Contents of a Div
HTML Table Cell Width for Different Rows
How to Send HTML Email Using Linux Command Line
How to Vertically Align Text with Icon Font
Making Text Background Transparent But Not Text Itself
Xpath Testing That String Ends with Substring
Is It Ok to Use a Self Closing Div Tag
Should the HTML Anchor Tag Honor the Disabled Attribute
How to Prevent Text in a Table Cell from Wrapping
How to Center a Div Within Another Div
How to Set a Background in a Bootstrap Column That Oversizes the Div
Is This HTML Structure Valid? Ul > Div > { Li, Li } , Div > { Li, Li } , Div > { Li, Li }
Why Are Some of My CSS Rules Not Working