Tether to multple elements

Key Takeaways

If you've ever needed to connect one element to another one with a little visual indicator like we have here with these threads, it's actually really easy to do with a bit of modern CSS. You can see here I have my comment. Nested inside the comment is the replies UL, and each one of these guys here is the div with a reply. And now jumping on over to my CSS, I've turned off the threads to show us how we were doing this. Uh, but each one of those replies I am giving a after pseudo element, but basically have a border on the left side and on the bottom, which will create the line. So, how do we do that? Well, that means my comment is going to need to be an anchor. So, we're going to say dot comment has an anchor name of comment. Uh, and then I'm also going to come in and say that all of my replies are the same. So, reply uh double hyphen reply. So, here I have a position absolute already on my pseudo element. And what we're going to say is the top of the pseudo element is going to go to the initial comment all the way to the top. So, we're going to say anchor top of that comment. There, let's just give this really fast a width of 10 pixels and a height of 10 pixels and a background of red so we can actually see it. And if I turn off this comment uh right there, we can see the red things are actually here, here, and over here instead. Uh, maybe I'll make that yellow so it stands out even more. The top is anchored to the top of the comment. I made a mistake there. That should be the bottom of my comment, and it's moved down over to the bottom. The next thing I want to do is go and grab my left side. Should be my anchor left my comment. Then we can come in on my bottom. I'm going to say anchor to the center of each reply. And it doesn't look like it's working, but that's because I gave it a height. If I take that height off now, we can see it's stretching from the top here all the way down to over here. And for now, I'm going to turn off this background and just make the border a little bit thicker so we can see it a little bit better. One last one that we're going to want to do on here is to come in with the right side, and the right side of this should be anchored to the left side of that reply. So, we can say anchor we want it to be the left of my reply. And here I had a width. We can take that width off now, and it's connecting from here and going all the way and connecting to that side there. On that left, we can add a calc, and with that calc, we can just wrap this entire thing in and say that we want to do plus point plus I think it's one rem maybe to get it closer to the middle there. And if I bring this back down to being one pixel, it's going to look a little bit better. But you're probably noticing a little bit of a problem. We're only connecting to the bottom one, and we're not connecting to these two over here. And that's because all of my replies currently have the same anchor name, and so this after is going, "Well, where's my anchor name?" CSS last thing wins, they all go down to the bottom. I can come over here and also give this an anchor scope and give it the exact same name. And so as long as something is a descendant of the reply, which an after is as a pseudo element, it's a descendant of the reply, that anchor name that it's looking for will be scoped to that parent. I can clearly see now that these are individually linked.