Five: How to underline body text links?

I want to underline two names that are part of the body text that are linked to content that isn’t on the navigation.

Here’s the site: http://mathias-ivanissevich-edpd.squarespace.com/contact/

The idea is to have ‘Jorge di Bendetto’ and ‘Lucía Iturbe’ underlined so its clear that they are links.The Style Editor only allows me to change link colors and hover colors.

Mathias, I like very much the image that headlines your website. That's a nice photo.

Are you familiar with adding CSS rules to the Custom CSS Editor? You get there by clicking the paintbrush icon, scrolling to the bottom of the Style Editor, and clicking the Custom CSS button.

I can offer two ideas for underlining the links. One idea is to add a simple underline to the font:

#canvas-wrapper a {text-decoration: underline;}

I did not so much like the look of the result, so I also offer this alternative approach:

#canvas-wrapper a {border-bottom: black solid 1px;}

Add one of these rules to your Custom CSS Editor. You should see results. Then you can decide which result you prefer. If you like, you can change 1px to 2px (or any other number) and get a thicker line.

The use of #canvas-wrapper in the rules above targets the html DIV element containing the main body content of your page. Links in the footer and the header will not be affected.

Jonathan Gennick, Author: Learn CSS for Squarespace

I appreciate the answer, however the problem with the CSS rules that you provided is that it applies to every link on the site, including the Navigation buttons. I'm trying to only underline the links in the Body of the contacts page.

I'm sorry. I don't know how I missed seeing that. Target the page body instead:

#page-body-wrapper {border-bottom: white solid 1px;}

It looks like you've instead solved the problem by changing the link color to white. That might be a better approach. I like it better than to have the underlines.

The rule I give here will cause some trouble if you ever place a Call to Action button in your page body. That's another reason to go with your current approach of making the links white.

#page a {text-decoration: underline; }

this works for Body Links in Bedford - Hayden - Bryant.

I like this, but I want the underline to not cross text, to be spaced from text, you know, too close to text looks clumsy, even as it crosses the leg of g...

I like this, but I want the underline to not cross text, to be spaced from text, you know, too close to text looks clumsy, even as it crosses the leg of g...

Hi there - I've applied the following custom CSS:

#page-body-wrapper a {border-bottom: #ED7002 dotted 1px;}

as I want the luiks within the body text to be underlined. However when I view my blog all the links within that are all underlined now too and I don't want this - I only want to target links within the page text - is there a way to do that?

I fixed the issue by using this instead:

p a {border-bottom: #ED7002 dotted 1px;}

Finally! Thank you for this, was driving me crazy on the Rally template.

Command U for Mac