How do I draw a thick line behind a text?

Question

I'm trying to figure out how I can have an effect of a thick line behind the heading. You can see what I mean by running the code below. It works, however, the problem is that if a heading is too long and is on multiple lines this line is only present at the bottom of the last line of the heading. My implementation is not optimal, and I'm trying to figure out how to do it properly. Thanks.

CLarification: if my header is 2 lines or more, i need that underline to be under both lines.

.contentWrapper{
  display: inline-block;
  position: relative;
  margin: 0 auto;
}

.heading{
  padding: 0 10px;
  margin:  0 auto;
  font-weight: 400;
  font-size: 2.8rem;
}

.underline{
  width: 100%;
  background-color: orange;
  height: 12px;
  position: absolute;
  bottom: 4px;
  z-index: -1;
}

<div class="contentWrapper">
  <h1 class="heading">Some Heading</h1>
  <span class="underline"></span>
</div>

What you are trying to do looks to me like custom underline. In this blog post https://css-tricks.com/styling-underlines-web/ there are few cool examples. Some are only for latest versions of browsers, but some are compatible with all. You just need to modify it's height, but the principle should be what you are after. — eboye, Aug 15 '20 at 00:23

score 0 · Answer 1 · answered Aug 15 '20 at 00:32

0

This is very strange... but apparently works

h1{ font: normal bold 32px /14px verdana; padding: 0 10px; display: inline-block; border: 1px solid orange; border-width: 0 0 12px;}

<h1>Some Heading</h1>

Please, test it - it shouldn't be allowed :) to make big font and shorty line... You may also set it separately line-height: 14px

answered Aug 15 '20 at 00:32

black blue

798
4
13

thanks,it doesn't work if a heading is too long – Noob Aug 15 '20 at 00:36

score 0 · Answer 2 · answered Aug 15 '20 at 00:50

0

Update:

.contentWrapper{
  display: inline-block;
  position: relative;
  margin: 0 auto;
}

.heading{
  padding: 0 10px;
  margin:  0 auto;
  font-weight: 400;
  font-size: 2.8rem;
}

.underline{
  text-decoration: line-through red;
  margin-top:20%;
}

answered Aug 15 '20 at 00:50

Trey

17
5

Trying to find out how to get it to background on the text, so just a moment; I just passed it to you so you could try, it doubles productivity. – Trey Aug 15 '20 at 00:53
thanks for trying. It doesn't work this way, and i'm sure there is some css trick to do it right. Maybe some experienced guys decide to show us how to do it right. – Noob Aug 15 '20 at 00:55
One final try, brb. – Trey Aug 15 '20 at 00:57
Sooo I'm only having one problem at this point, the text is not wanting to be scaleable, do you know what might be causing it, because everything else is fine besides the scale of text. – Trey Aug 15 '20 at 01:04
I believe to be my final update: The best thing you can do is use the code you have and media query, Basically the media query will resize the page for rez's set, aka phone size, monitor size and 4k size, they are easy to do; though my experience with them is low and I'm still learning, but that's why my friend who has 2 years exp in the industry said; it all comes down to media queries for something like this. – Trey Aug 15 '20 at 01:09
https://www.youtube.com/watch?v=fA1NW-T1QXc – Trey Aug 15 '20 at 01:13

How do I draw a thick line behind a text?

2 Answers2