Скачать или смотреть Joined Break Out Text Boxes in Squarespace (CSS Only)

Saw an interesting request on the Squarespace forum from user Paola-nmn and wanted to give it a crack.

The goal: Have "break out" text that is connected to some other "highlighted" (or in this case, boxed) text via a dotted line that turns into an underline. Not 100% sure the application but it was a fun challenge.

So here's a run through of me figuring out how to replicate a unique set of connected pieces of text.

Forgive me for it being long and a bit rambling, I was hoping to share a bit of my process.

Yes, there are "better" ways to do this with Javascript, but my goal was to create a fairly easy to understand, approach using only CSS as most Squarespacers aren't big users of Javascript. I wanted something accessible to most designers etc who are low-code.

This should work fine on Squarespace 7.1 and also 7.0.

Scroll down for sample CSS.

=============================================

If my tutorials/tips have helped you, feel free to send me some coffee as a thank you :)
https://www.kwameand.co/say-thanks

Interested in more Squarespace tutorials, tips and tricks?
Why not visit the SquareSkills website for more content like this:

https://www.SquareSkills.dev
  / squareskills  
  / squareskills  

If you're looking for something specific, some custom design, development or coding work, you can reach out to me via my website:
https://www.kwameand.co/
  / heykwame  
  / kwameand.co  

=============================================

The Code:

/* Squareskills: Joined Break Out Text Via Dotted Line */

/* Target Blocks Via ID*/
#blockid-12345 {

/* Boxed Text */
//replace with your colour code
span[style="color: rgb(251, 5, 5)"]{
color: inherit!important;
outline: 2px solid red; //adjust to fit your spec
}
/*Remove From Boxed Text */
//replace with your colour code
h2:has(span[style="color: rgb(251, 5, 5)"]) {
margin-bottom: 0!important;
line-height: 1.4em; // optional line height adjust to prevent overlap
}


/* Break Out Text */
//replace with your colour code
span[style="color: rgb(47, 251, 9)"]{

border-left: 2px dotted red; //adjust to fit your spec
border-bottom: 2px dotted red; //adjust to fit your spec
border-top: 5px solid transparent; //helps fix spacing
color: inherit!important;
padding: 3rem 3rem; //adjust to fit your spec
margin-left: 4rem; //adjust to fit your spec
}
/* Remove Margins From Break-Out Text */
//replace with your colour code for break out text
p:has(span[style="color: rgb(47, 251, 9)"]) {
display: flex;
margin-top: 0!important;

}
}


=============================================

#squarespacetutorial #squarespacetips #squarespacewebsite #squarespacecss #squarespace #squarespaceplugin #squarespacecode #squarespacesnippet #squarespacehelp #squareskills #squarespace71 #fluidengine