I have a layout with a section of text and two links, where I want lines to extend from the end of each link to the end of the container. I can achieve this using position: absolute; and setting a fixed width on the pseudo-elements, but I'm looking for a way to do this with Flexbox so that the lines are dynamically sized based on the parent container's width.
Here's my current attempt at using flexbox for this.
HTML structure:
<div class="hero-text"><h1><a href=#>CURRENT EXHIBITIONS</a></h1><div class="hero-text-bottom"><div class="title"><h2><a href=#>SPECIAL EVENTS</a></h2></div><div class="additional-links"><div class="link-with-line"><a href="#" class="hero-small-link">CONTACT</a><div class="line"></div></div><div class="link-with-line"><a href="#" class="hero-small-link-two">CONTRIBUTE TO THE MUSEUM</a><div class="line"></div></div></div></div></div>And CSS:
.hero-text { position: fixed; display: flex; flex-direction: column; bottom: 0; left:0; margin-left: 3rem; margin-bottom: 3rem; font-family: var(--font-primary); color: white; font-size: 3rem;}.hero-text-bottom { display: flex; align-items: center; }.additional-links { display: flex; flex-direction: column; margin-left: 1rem; gap: 1rem; font-size: 1.25rem; width: 50%;}.title { width: 75%;}.link-with-line { display: flex; align-items: center; width: 100%; }.line { display: flex; margin-left: 1rem; top: 50%; width: 100%; border-top: 1px solid white; transform: translateY(-50%); }.hero-small-link, .hero-small-link-two { z-index: 1; white-space: nowrap;}It works, but i have to use nowrap on the text, and i also think my html is definitely overcomplicating it.
Any help with how to do this properly?
I tried using position absolute, which works, but i want to use flexbox for a more clean look.
When using flexbox i expected it to be nothing more than adding an inline-line element to the right side of each text element, and set it to flex grow or width 100%, but it does not work.
Expected result:
https://i.sstatic.net/4JnMg.png
What I get: