Div | line between 2 link blocks? best practice

Design help General
1

Quick Q & I’m sure it’s a beginner mindset

But how do I use a | between two link blocks that have underlined text, I don’t want the divider | to have any underlines so it breaks them up nicely.

I’m sure it’s a simple thing, but simple is what I’m willing to learn today :wink: thanks

Here’s what I designed and what it’s looking like in webflow. I’ve tried to

-or- is it just a matter of making it a graphic .png and inserting it between both text links?

any help is appreciated, thanks

2

[text for first link] | [text for second link]

Type it out like that as a regular text element. Then highlight the words as you would like them to be links and click the link shortcut that pops up above the highlighted words. Then give a class and style as you like.

If you need extra space between the words and your | you can either add margins to the links or shift + space will create a nbsp; for you.

1 Like
3

thanks @Cricitem

Just wondering if you could shed some light on a more extensive visual design element that would have to work with text… A Show more [ arrow down ]

779×183 49 KB

I’d also like to try to add an on.Hover change, but it could be on the text only and maybe not on the graphic if the arrow is a graphic.

I tried looking to see if I could use a unicode but no joy in finding this style of down arrow.
http://xahlee.info/comp/unicode_arrows.html

Anyone else have a hack solution to this type of hyperlink need / style? thxs

4

Add some right padding to the link, then add your down arrow as a background image. You can swap out the background image on hover as well, so if you want to do a background color and image swap on hover you could do that.

5

isn’t that formatting to exact placement of background image going to be horrendously hard especially for all breakpoints?
thanks

6

Not if all you’re doing is an arrow in a “Show more” fashion. I’d do a right-padding of 10px, and have an arrow that is 6px wide. Position it right-center with no repeat and you’re done.

1 Like
7

worked like a charm! thx @Cricitem - have a superb Day!

1 Like
8

This topic was automatically closed after 60 days. New replies are no longer allowed.