Left border for text should have same height as text - html

Question

I'm trying to make the parent div's left border the exact same height as the text inside the div.
Here's the problem:
My code is simple:
#box {
width: 500px;
padding-left: 2rem;
border-color: #01B288;
border-style: solid;
border-width: 0 0 0 3px;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
I found a solution that only works for one block of text, but I have 2 blocks inside the same div.

Answer 1

Use ::before CSS selector.
See the snippet below.
#box {
position: relative;
width: 500px;
height: auto;
padding-left: 2rem;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
#box::before {
content: "";
width: 3px;
height: 95%;
background-color: #01B288;
left: 0;
bottom: 0;
position: absolute;
display: block;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
EDIT 1
Use #media query and set different height for mobile. It's currently set to 50% if the viewport is smaller than 576px (50% is obviously too much, so you can see the effect).
See the snippet below.
#box {
position: relative;
width: 500px;
height: auto;
padding-left: 2rem;
overflow: hidden;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
#box::before {
content: "";
width: 3px;
height: 95%;
background-color: #01B288;
left: 0;
bottom: 0;
position: absolute;
display: block;
}
#media screen and (max-width: 576px) {
#box::before {
height: 50%;
}
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
EDIT 2
What about if you remove line-height only from the first line?
See the snippet below.
#box {
position: relative;
width: 500px;
height: auto;
padding-left: 2rem;
overflow: hidden;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
#box::before {
content: "";
width: 3px;
height: 100%;
background-color: #01B288;
left: 0;
bottom: 0;
position: absolute;
display: block;
}
h1:first-line {
line-height: 0.8;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>

Answer 2

So have a look at the code below. If you remove the margins and set the line-height to the same height (1em for example) for all the elements in the div that its concerning then you can recreate the line like below.
It might be minimal but if your going to use a different font and it's a bit off just play with the calc(1em / ..). If your going to change te line-height you might try to fiddle with calc(..em / 8).
body{ font-family: Arial, sans-serif; }
h1{ font-size: 80px; }
p{ font-size: 20px; }
div > *{
position: relative;
line-height: 1em;
margin-top: 0;
margin-bottom: 0;
}
div > *::before {
position: absolute;
content: '';
border-left: 3px solid DarkSeaGreen;
height: 100%;
left: -5px;
}
div > *:first-child::before{ top: calc(1em / 8); }
div > *:last-child::before { bottom: calc(1em / 8); }
<div>
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>

Answer 3

Using :Before selector with height:93% of its parent and eyeballing it from top:5.5%
#box {
width: 500px;
padding-left: 2rem;
position:relative;
}
#box:before{
content:"";
position:absolute;
height:93%;
top:7%;
left:0;
border-color: #01B288;
border-style: solid;
border-width: 0 0 0 3px;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin:0;
padding:0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin:0;
padding:0;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>