Streaming live at 10am (PST)

Div | line between 2 link blocks? best practice


#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.


#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 ]

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.


#7

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


#8

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