CODEWITHSUNDEEP
css
user2991837
user2991837

Reputation: 798

Underline several lines of text + underline to be full width + responsive

enter image description here enter image description here I have a heading. On a desktop screen the heading is three lines, on a phone screen it is six lines.

The text is left aligned (not justified).

I want all lines of text to be 'underlined' and the line to be 100% of the width of the containing div (not the width of the text).

The line height is measured in ems. And at smaller break-points the font size is measured in vw.

I've tried created a repeating background-image linear-gradient, but because the line-height is measured in ems and I only want the underline to be 1px heigh, browsers are calculating the height of the underline to be less than 1px (see second image showing a border-top of 1px compared to the linear-gradient - both are rgb(255,255,255). Hence the underlines look very faint. And at smaller viewports are very hard to see.

Any suggestions?

html {
  font-size: 62.5%;
}

.hero_image {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  padding-bottom: 8rem;
  max-width: 111.6rem;
}

.hero_image h1 {
  font-size: 12rem;
  line-height: 1.1em;
  background-image: linear-gradient(to bottom, rgb(0, 0, 0) calc(1.1em - 1px), rgb(0, 220, 200) 1.1em);
  background-repeat: repeat-y;
  background-size: 100% 1.1em;
}

@media screen and (max-width:660px) {
  html {
    font-size: 56%;
  }
  .hero_image h1 {
    font-size: 10vw;
  }
}
<div class="hero_image">
  <h1>XYZXYZ <br>fancy design agency for&nbsp;posh stuff</h1>
</div>

https://jsfiddle.net/4exgf7zs/1/

POSSIBLE SOLUTION By adding in a third stop on the linear gradient it now seems to work. And increasing the line to 2px. Although I don't understand why?

background-image: linear-gradient(to bottom, black calc(1.1em - 2px), white calc(1.1em - 2px), white 1.1em);

Upvotes: 2

Views: 982

Answers (1)

Domino
Domino

Reputation: 6788

While I couldn't exactly explain why this issue occurs, it can be avoided using repeating-linear-gradient over the whole element instead of a linear-gradient which gets tiled.

html {
  font-size: 62.5%;
}

.hero_image {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  padding-bottom: 8rem;
  max-width: 111.6rem;
}

.hero_image h1 {
  font-size: 12rem;
  line-height: 1.1em;
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(0, 0, 0),
    rgb(0, 0, 0)     calc(1.1em - 1px),
    rgb(0, 220, 200) calc(1.1em - 1px),
    rgb(0, 220, 200) 1.1em
  );
}

@media screen and (max-width:660px) {
  html {
    font-size: 56%;
  }
  .hero_image h1 {
    font-size: 10vw;
  }
}
<div class="hero_image">
  <h1>XYZXYZ <br>fancy design agency for&nbsp;posh stuff</h1>
</div>

This solution seems to be causing some issues where a line may or may not appear below the last line, you might want to fiddle some more with it.

Upvotes: 1

Related Questions