Vertical Line same height as text

Hey there, dear community! :slight_smile:

I’m trying to recreate a design which really doesn’t seem too hard to do, but I absolutely can’t seem to figure it out.

I layouted the whole page for a client in Figma with a vertical line that’s exactly the same height as the heading + subheading of each page. And the niche of my client is very detailed-oriented, so this is super important to him.

However, when trying to do so in Webflow, I tried to achieve it with “borders”, but no chance. Seems like the problem is that the text itself has a line height, and the border always adjusts to this line height (making it seem like border and text aren’t the same height).

I also tried to recreate the vertical line with a div next to the text elements with width 2px and height 100% and setting paddings / margins equivalent to the line height so they cancel each other out, but setting the height to 100% doesn’t work bc the div doesn’t have any height then (probably because it has nothing inside), and setting an absolute px number wouldn’t be responsive.

I would appreciate help on this sooo much, I’ve struggled for many hours now but can’t seem to make it work :eyes:

All the best and lots of health to you,
Nicolas


Here is my site Read-Only: Webflow - Line same height as div

Does this need to be responsive, and adapt to varying content?
If so it’s a bit ugly- CSS doesn’t support e.g. line-height: 1 on the first line only.

I think I’d try…

Make certain your top and bottom padding are 0.
Arrange the piece as;

DIV wrapper
  H2 heading
  P brief
  DIV border

And then make the DIV wrapper position relative and the DIV border position absolute. Give your DIV wrapper a left padding, maybe 1.5rem. Give the DIV border a left border style, and set it to left position.

Then, adjust the px top and bottom to visually align with your text. It won’t be perfect, but it will look pretty aligned, as long as you’re consistent with your text ( first letter always capitalized, etc. ).

1 Like

Michael, you’re an absolute godsend! That absolutely did the trick for me and works exactly like I wanted it!! Thank you so much and I wish you a great new year!! :raised_hands:t3:

I will just add some other options ( beside @memetican solution) using CSS to do that programatically. Only have to note that there is no native CSS way to set last line line-height.

here is some code:

<style>
.right-column h1:first-child{
margin-top: 0;
}

.right-column h1::first-line{
color: red;
line-height: 1;
}
.right-column p:last-of-type {
margin-top: 1rem;
margin-bottom: 0;
color: red;
}

/* OPTION 2
.right-column p:nth-child(3){
margin-top: 1rem;
margin-bottom: 0;
color: red;
}
*/

/* OPTION 3
.right-column p:nth-last-child(even){
margin-top: 1rem;
margin-bottom: 0;
color: red;
}
*/
</style>

1 Like