I still recall the first time I saw the highlighted text effect. I had only just started learning web development and while browsing the internet one day I came across a blog that had a pretty pink highlighted heading. I remember thinking to myself “hmm how do I highlight text in CSS?” And then thinking that MAYBE one day I would know how to do that?
WELL, fast forward to one week later (no joke), I had just signed my first website build and what was her request? “All headings to have that cool highlighted text effect”. Guess the time had come – I would learn how to do the highlighted text effect!
What ensued was a panicked googling session, bits of information gathered here and there, a lot of trial and error and voila! I had figured out the “cool highlighted text effect”
**hooray – pop the champagne**
I was so excited! This was my first time doing any sort of CSS styling, and it was also the moment I knew 100% I had made the right decision about learning web development!
What many people don’t know is that HTML already has a standard highlight tag, the ‘mark’ tag.
<mark>This is an example of me using the mark tag.</mark>This is an example of me using the mark tag.
Pretty nifty huh? But what if you want more than the basic (boring) yellow highlight text?
Different colours, thicker line, thinner line, even multiple colours!
Well, say hello to my little friend Cascading Style Sheet (CSS).
I LOVE CSS! Seriously, it’s the best.
There are a couple of ways you can achieve this effect, I think my way is the best (obviously). But the way I am about to show you is in my opinion the most flexible option for width, height and positioning. It works really well and you can achieve any look you desire!
So let’s begin!
Step 1: The basics.
First of all we need to create the section of text that you want to highlight, you can do this to anything you want; headings, paragraph, links, dot points etc. I’ll be using the H1 heading tags.
*HTML has 6 heading tags: H1, H2, H3, H4, H5, H6. H1 is the largest and should be used for the main headings of a page.
<h1>I love tacos!</h1>I love tacos!
Step 2: Get specific.
We don’t want to make ALL H1 headings have the highlight effect, so we need to get a bit more specific, to do this we add the <span> tag. The <span> tag is used to group and apply styles to inline elements, you can read up more on it here.
<h1><span>I love tacos!</span><h1>I love tacos!
You can see the <span> tag doesn’t actually do anything, to add styling to this we need to add a class (the class is what we target to add styling).
<h1><span class="highlight">I love tacos!</span></h1>Step 3: Style it!
Now that we have the class “highlight” we know what we need to target when we add CSS.
If you’re using WordPress this can be done by either of the following methods:
- Add it to the style.css
- Add it in Additional CSS from the WordPress Dashboard >Appearance > Customize
Now the fun part!
highlight {
background: linear-gradient(120deg, #e4a0a1 0%, #e4a0a1 100%);
background-repeat: no-repeat;
background-size: 100% 20%;
background-position: 0 60%;
}I love tacos!
Woohoo! Isn’t that fun?!
Let’s not stop there though! By adjusting the CSS we can do whatever we please!
Thicker? No problem! Just increase the background-size.
highlight {
background: linear-gradient(120deg, #e4a0a1 0%, #e4a0a1 100%);
background-repeat: no-repeat;
background-size: 100% 50%;
background-position: 0 60%;
}I love tacos!
Thinner? You got it! Decrease the background-size.
highlight {
background: linear-gradient(120deg, #e4a0a1 0%, #e4a0a1 100%);
background-repeat: no-repeat;
background-size: 100% 5%;
background-position: 0 60%;
}I love tacos!
What if you want to raise or lower the highlight? All you need to do is adjust the background-position. The lower the percentage the “higher” the highlight.
highlight {
background: linear-gradient(120deg, #e4a0a1 0%, #e4a0a1 100%);
background-repeat: no-repeat;
background-size: 100% 40%;
background-position: 0 30%;
}I love tacos!
And the higher the percentage the “lower” the highlight.
highlight {
background: linear-gradient(120deg, #e4a0a1 0%, #e4a0a1 100%);
background-repeat: no-repeat;
background-size: 100% 40%;
background-position: 0 90%;
}I love tacos!
Step 4: Go wild!
There are endless possibilities for what you can do, I’ll show you a few more!
You can target specific words in a sentence.
<h1>I <span class="highlight">love</span> tacos!</h1>I love tacos!
You can use multiple colours.
You’ll notice there are now 3 classes (highlight1, highlight2, highlight3), you need to add styling for each of these.
<h1><span class="highlight1">I </span><span class="highlight2">love </span><span class="highlight3">tacos!</span></h1>
I love tacos!
You can do a pretty gradient effect.
<h1><span class="highlight">I love tacos!</span></h1>highlight {
background: linear-gradient(120deg, #e4a0a1 0%, #b8e1ff 100%);
background-repeat: no-repeat;
background-size: 100% 20%;
background-position: 0 60%;
}I love tacos!
I could go on all day but I think that is more than enough to get you started! Like I said earlier, the highlight effect was the first time I saw what I was capable of achieving with CSS – so it has a special place in my heart
