CSS- format hyperlink with different color underline + heavier weight SS 7.1

a {
    text-decoration: color: #A9450C !important;
    border-bottom: color: #A9450C !important;
}

I have tried this code to make the underline on hyperlinks a different color. I would like them to look like this. 

To do this, I need to change the color of the underline and increase the weight of the underline. What code will allow me to do to this?

Additionally- would love to format the button in the header section to also look like this. Remove the box and add the underline. Also make the text in the header smaller. 

Currently looks like this: 

would like ti to look like this:

Fundamentally you want this:

#blockid a { 
  text-decoration: none;
    border-bottom: 3px solid yourcolour;
  }

You can see a quick example walking through some application below and getting more specific but that should cover you.

You had the right idea just didn't execute it quite right.

Demonstration Video.

Live example.

Thank you! It worked. but is also undid my CSS for hide underline in the footer. I'm still unsure how to target specific items.

How do you see the class of each item on your site? Is that a plugin?

Hi @lmsully

You can use the Inspect function on your browser or, if you're on Chrome, you can use this plugin.

If you are targeting the correct element, it won't affect your footer.

P.s. If my answer has helped you, please mark it as the best answer so it's useful for others. Thanks.

On 6/14/2021 at 8:32 PM, lmsully said:

How do you see the class of each item on your site? Is that a plugin?

Right click and inspect.

You'll see something like this:

The bit I've highlighted (class="ipsComment_author....") is the list of classes that an element has.