How can I restyle hyperlink underscore?

Hi from sunny but chilly York Uk :smile:

This link illustrates my design hurdle but here goes…

I would like to make the font in the hyperlink bolder and have a thicker underscore when the mouse hovers over the links. Can any one give me some css styling tips for changing the look and fee of un ordered lists?

Thanks in advance,

p.s how do i make links in post _blank so when clicked on they open a new tab?

On hover, set font-weight:bold;.

Not sure what else to tell you without code :slight_smile: . Can you set up a codepen?

Not really, there are too many jpg artifacts, it’s too small, and it’s hosted on photobucket so it’s blocked on my current machine (corporate firewall) and completely unusable on mobile (and tons of popup ads). I honestly have no clue what’s going on in that screenshot, other than it looks like it’s a picture of a browser pointing to some code.

Save the image much larger and as a PNG. And upload it somewhere that is not photobucket. Try or something.

This also might be of some help:

I don’t do photobucket either. Too many ads.

You can drag and drop the image into a message and avoid using a separate image hosting site, if you wish.

If you are just asking how you can bold text and it’s underscore on hover…Try removing the text-decoration on the links and then adding some padding and a bottom border to it. On hover, bold the text and beef up the border-width.

Yeah basically what @gvinson said. Go for borders and play with the padding.

Thank you so much, i can see i’ll need to go the code pen way but if you get a chance can any one confirm the Pro level of membership @ be good if all i wanted to do was post my design issues from site to time on sitepoint?

Thanks in advance,

I don’t think you need Pro for that. Public repositories are free, Private ones are not.

First attempt at getting codepen on sitepoint not totally successful. How do I get it to imbed like the above examples?

See the Pen Home page photography by David (@Pingbat) on CodePen.

Just paste the link

Noob attempt to get code pen link to imbed work so here goes…

Oh dear god that dint work… so where is the link please that everyone else is using to get the code pen to imbed?

Post it on a line by itself.


Ok here goes…

I just edited your original so now it shows using the method that cpradio mentions above :slight_smile:

Thanks noob is slightly less noobish but not for long!

1 Like

Just figured this out (Codepen)… but despite everyones best advice and my noodle being a bit baked I still cant get a “fatter” underscore on hover with the hyperlinks (Yes i can get all the font to jump bigger but I just want a thicker underscore on hover) . Heres the code pen thing:

Just use a border then.

#menu a:hover {
	border-bottom:4px solid #000;
1 Like

Yes that worked thank you everyone! And to add thank you for introducing me to code pen, this is certainly the way forward :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.