How to create a low highlight behind your text

Wondering how to create that cool low highlight that you see behind headings and links all around the interwebs? Then keep reading 'cause I'm gonna show you how to nail it!

We're going to be adding the highlight background to one word in a heading, to the entire heading and to links inside the body text so you can get a pretty broad idea of how to set it up.

Related: want to better understand and learn more about applying these CSS tricks to your Squarespace site? Then enroll in the FREE 7-day code training!

 

Adding a low highlight to your headings

Highlighting one word

Let's say you want to add a nice big h1 to your homepage and highlight just one word, it's going to say: "This is my awesome heading" with the word awesome highlighted.

Since we need to target just ONE word, we need to create the h1 inside a code block like so:

<h1> This is my awesome heading </h1>
Creating an h1 inside a code block

 

Next, we're going to surround our chosen word with a span tag:

<h1> This is my <span> awesome </span> heading </h1>
Selecting one word inside an h1 in a code block

 

This way, we're going to be able to give our word a specific class we can target through CSS to style it however we like! I'm naming mine highlight

<h1> This is my <span class="highlight"> awesome </span> heading </h1>
Adding a specific class to a word in an h1 inside a code block

Pro tip: you can use id instead of class if you're not going to use the highlight class more than once per page. I rather keep it as class since I tend to change my mind and apply the same style everywhere!

 

Perfect! Now, we can hop onto our Custom CSS window and style away.

And here's the trick to achieve that highlight effect: we'll use a gradient background!

 

Let's target our class

.highlight {
}

 

Now, let's set the background property with the linear-gradient function (I talk more about it in this tutorial to add half backgrounds to index sections)

 

Briefly, what we're going to set is the angle to 180 degrees so the "gradient" is horizontal, make the first color transparent and set it to half the background, and add the color of our choice as the other half.

.highlight {
  background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #FFD0AE 50%);
}
Adding a low highlight to a word inside an h1 in Squarespace

 

Ta-dá! That's all there is to it.

 

Pro tip: to display more or less of the highlight, play with the coverage percentages (50%) but make sure that you set both to the same number to avoid a blurry line, unless that's what you're going for!

 

Highlighting the entire heading

If you don't want to highlight just one word but the entire phrase, then you can either:

A. Keep using the code block and add the class to the h1 instead, and remove the span

<h1 class="highlight"> This is my awesome heading </h1> 

 

B. If you're using an index page, stick with Squarespace's heading dropdown and target it through the section's url to give it the background style! It will look something like this in your Custom CSS window:

#sectionurl h1 {
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%);
}

 

C. If you want to do it across your entire site, simply add the background to all your headings 1, 2 or 3

h1 {
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%);
} 

 

Regardless of the path you choose, you may find yourself with a little problem when doing this:

Background extending beyond the h1 in Squarespace
Background only behind the last word of the h1 in Squarespace

 

As you can see in the images above, the background highlight is expanding beyond the actual text and just appearing behind the last word when the heading breaks into two lines.

 

The issue here is that your h1 is set as a block level element, therefore your browser is considering the width of the entire container as the guide for the background size.

What we need to do is switch it to display: inline; so it uses the content – the heading itself – as the guide to place the background and set its width.

h1 {
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%);
  display: inline;
}
Adding a background highlight to each line of text in an h1

 

There we go!

 

Adding a low highlight to your links

If you choose to highlight the links across your entire site, then you'll need to do something very similar to option C above, and target your elements like so:

a {
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%);
}
Adding a background to links in Squarespace

 

However, this adds the highlight to ALL links on your site, so if you want to limit it to just your copy links, simply indicate that you're targeting all links that are inside a paragraph element, like so:

p a {
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%);
}
Screen Shot 2018-08-21 at 8.23.53 AM.png

 

Good!

I'll also remove the underline from the body links that Squarespace automatically adds as a bottom border.

p a {
  background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #FFD0AE 65%);
  border-bottom: none !important;
}
Adding a background highlight to body text links in Squarespace

 

And there you go! Now you can add a low highlight to the text on your site to make it stand out and match your brand.

 

Until next time,

B.

 

LIKED THIS POST?

I'd love it if you shared!


More Squarespace tips & tricks this way