Creating a Low Highlight behind Links

So this post came about because I was fidgeting with different WordPress themes and decided I wanted to set out and learn how to change the way my post links were appearing. I came across a theme that was highlighting the lower half of text and which looked kinda cool in my opinion. Here’s an example of it working on my personal site:

This quest led me to discover two new CSS functions: Linear Gradients and Transitions. I’m excited to now have these under my tool belt! I’ve never had any formal training for CSS, so this trial & error thing is how I’ve been learning. :)

---

Linear Gradients

Now I had previously known that using background-color would highlight the entire text, but that wasn’t what I was after. Apparently, if you want to cut the highlight in half, you have to use what’s called a linear-gradient. It works something like this:

linear-gradient(angle, color-stop, color-stop)

I had to do a little reading to wrap my head around the ‘color-stop’ idea, but I found this article helpful if you care to read further. But to break it down, the angle is referring to the angle of the color line. This could be horizontal (my scenario) but it can also be vertical, at a 45° angle, or simply not specified. The next two sections, color-stop, color-stop are basically what’s used to customize the color gradient. You can specify using either length or percentage, and in my case we’ll want to use the latter.

p a {
background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #E6DFE4 65%);
}

So this is what I’m using. I only want these changes to effect the links (a) in the main paragraph text (p). The background of the links (i.e. the highlight) will be a 180° angle (i.e. horizontal). In the second portion, I’m specifying that a little over the top half of the links will be transparent, while the bottom half will be a nice shade of pink. I encourage you to play around with the percentages so you can get a sense for how they work. I could have done 50%-50%, but I wanted the highlight to fall a little below the halfway mark so you could still read the text.

Incorporating a Hover Action

This next piece is pretty simple. Now that I’ve got the links where I want them, I wanted the highlight to completely fill the text when I hover over the link with my mouse. Like so:

This was done by using the background-color property that I mentioned above. Here’s what I used:

p a:hover {
	background-color: #E6DFE4;
}

Easy peasy, right? It’s just basically removing the linear gradient and doing a full blown highlight when I hover over the link. The only issue that I noticed, and it’s super picky, but it highlighted too quickly. Lol, I wish I wasn’t serious, but this led to my next discovery…

Adding a Transition

In reading this guide, I learned that transition properties allow you to change values over a specified duration rather than having them occur immediately. Just what I was looking for. Transition properties take the following form:

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

For me, this translates to the following:

transition: all 0.8s ease;

I’ve only got one transition, but I’m calling all transition properties to keep it simple. I want the effect to take place over 0.8s and I want it to happen with ease! You can choose from a handful of predefined transition-timing-funtions like ease-in or step-start and I’ll link to them here. Finally, I don’t want to delay the animation so I left the final transition-delay out.

Now when I hover over links with my mouse, it just sort of fades in to a full highlight. *chef’s kiss*

The Final Product

p a {
	text-decoration: none !important;
	background: linear-gradient(180deg, rgba(255,255,255,0) 65%, #E6DFE4 65%);
}

p a:hover {
	background-color: #E6DFE4;
	transition: all 0.8s ease;
}

^I added one last line to the top which is essentially removing any previous text-decoration defined by my theme. Check out the GIF below to view this in action: