Left border for text should have same height as text

Mr. Fontastic 0
Viewed 54

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:

enter image description here

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.

css html
3 Answers

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>

Cervus camelopardalis0

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>

T-S0

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>

UmairFarooq0
Related