How to add thick colored underline to headings

Hi Michelle,

Great question, thanks!

At a glance, the main issue I see is that there’s a small error in your CSS at the moment…the rule set above your new one is missing its closing brace, which makes this new one invalid.

Here’s what’s currently in there:

.logo .header-logo-text {
    font-size: 65px;
	color: #4B0082;
	
.purple-underlined {
  text-decoration: underline solid purple 10px;
}

And here’s what it should look like:

.logo .header-logo-text {
  font-size: 65px;
  color: #4B0082;
}
.purple-underlined {
  text-decoration: underline solid purple 10px;
}

If you still have trouble after fixing this, let us know and we can see what the problem is at that point.

Love the thick underline look, btw- very nice!

Hi Steven,
Thank you so much for the detailed response even though this issue had nothing to do with the theme!! I so appreciate your help solving this rookie code mistake.

Michelle

Sure thing- if you need anything else, just let us know! ??

Thanks Steven!

While this coding now works, I realize it’s not exactly what I was looking for.

I’m trying to recreate the styling under the headings of this webpage. You’ll notice that there is no space between the words and the underline and the underline is longer than the heading. This is what I would like it to look like on my site only in purple.

Despite my best efforts I’m not able to get the correct coding for this to work. Would you be able to help me with the code to be able to recreate this?

Thanks again for your time!
Michelle

Hi Michelle,

Thanks for the example URL, that helps a lot.

There may not be a one size fits all for this if you’re using it on a variety of heading sizes, etc. But as a starting point, you can use this CSS, and then if we need to add some more specific styles in certain places, just let us know and we can help with that.

.underline strong {
    box-shadow: inset 0 -0.8rem 0 0 purple;
    padding: 0 8px;
}

With this, you’d obviously be adding the “underline” class to any headings you wanted to apply this style to. If you wanted to avoid having to add a class, you could apply it automatically using something like this:

.entry h1 strong, .entry h2 strong {
    box-shadow: inset 0 -0.8rem 0 0 purple;
    padding: 0 8px;
}

If you have any trouble or need any tweaks to it, just let us know.

Hi Steven,
This is amazing!! Thank you so so much for figuring this out for me.
I also wanted this to be a hyperlink so I was able to mash together some other codes with the portion you wrote. You can see the code in action in my latest post.

You’re a genius and I can’t thank you enough for all the help you’ve offered!!

Michelle

Hi Steven,
Just when I thought I had this figured out I opened it in Safari (looks how I wanted it to in Chrome) and there’s an extra black line under the text.

Is this just something I have to deal with when people view it in Safari or have I put something in my code that adds this?

.purple-underlined a{
border-bottom: 10px solid #d2b8ea;
text-decoration: underline #d2b8ea 10px;
box-shadow: inset 0 -0.8rem 0 0 #d2b8ea;
padding: 0 8px;
}

Thanks again!

Michelle

Hi Michelle,

Looks like progress, nice work!

The “text-decoration” is what’s adding the extra black line…you should be able to change it from underline to none, like this:
text-decoration: none;

Let me know if you see anything else amiss with it!

Hi Steven,
You’re the best!!! That was it. Thank you for the super prompt response! Looks perfect now.

Michelle

Happy to hear that, Michelle- thanks for the follow up! ??