Styling hyperlinked text in widgets & pages

Shapely
1

Hi colorlib,

I couldn’t find a fix to changing the text decoration for hyperlinked text in the parallax homepage widget and individual pages, EXCLUDING the menu names on top of the website AND page titles. My site is at: antonioalcazar.eu

Basically, I would like to:

  • Highlight hyperlinked text with a coloured bottom border/underline
  • Add background colour to underlined text upon hover

This is similar to what you can see on https://alantrotter.com. Cf: attached photos.

Thanks for the help,

Antonio

2

Hey there

First of all, you have a very strange markup, this is absolutely not necessary and my suggestion is to use clear HTML markup,
right now you have some style applied on the links, remove it and use this code in appearance > customize > additional CSS:

p a:hover {
color: white;
background: red;
}

p a {
border-bottom: 5px solid red;
padding-bottom: 0px;
}

3

Hey, thanks for that!

And how do I prevent hyperlinked text from automatically being bold on Shapely?

4

Hi There,

Hope you are having a good day and thank you for your question :slight_smile:

a, a:visited {
	color: #745cf9;
	font-weight: 400;
	cursor: pointer;
}

Please add this CSS 

in appearance - customize - additional CSSThanks!

Colorlib Support Team