Is there a way to tweak this code so that it underlines multiple lines of text?

Question

#full-service-creative-studio::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: 10px;
  width: 103%;
  height: 28px;
  background: #46989C;
  z-index: -1;
}

<h1 id="full-service-creative-studio">Full Service Design Studio</h1>

Currently, it works great for a single line but when we scale down to say mobile view it only underlines the bottom line of the text. Is there a way to make every line underlined?

Answer 1

I think what you are looking for is:

#full-service-creative-studio{
   text-decoration: underline  #46989C;
}

The pseudo selector ::after will put the line underneath the h1 ELEMENT_NODE and not the TEXT_NODE contained within the h1 element.

Answer 2

You need is a css class

.underline
{
   text-decoration: underline  #46989C;
}

currently, you are using an id selector to apply the css that is why it is only applying to a single line, using a class as a selector you can apply the same style to multiple elements.

Crux is that CSS id selector is used to find only 1 element. while classes are used to apply common styles across various HTML tags.

.underline {
  text-decoration: underline #46989C;
}

<h1 class="underline">Line 1</h1>
<h2 class="underline"> Line 2</h2>
<h3 class="underline">Line 3</h3>
<p class="underline"> Line 4</p>

Hope this w3school link helps you understand

Answer 3

#full-service-design-studio {
  
  text-decoration: underline  #46989C;
}

<h1 id="full-service-design-studio">Full Service Design Studio</h1>

Answer 4

The hardest part (which every other answer ignores) is the left offset you have on the underline element, as well as the 103% length.

You can use a data-attribute, pseudo element, text-decoration and text-underline-offset to handle this.

These are not perfect by any means, but gets you kind of close - and may give you an idea.

The title says "tweak code", so this adds a data-attribute to the H1 tag with the same title content. We then style the ::after pseudo with everything to push the line left. The problem with this, is that at certain breakpoints the pseudo element will wrap before the visible text, creating a hanging underline.

I don't think you can get this right, unless the whole underline can be left of the content (see the second example) - which again, gets close:

h1 {
  position: relative;
  line-height: 2.2;
  font-family: sans-serif;
}

h1::after {
  content: attr(data-content);
  color: transparent;
  z-index: -1;
  position: absolute;
  text-decoration: underline #46989C 28px;
  text-underline-offset: 10px;
  top: 0;
  left: 0;
  height: 100%;
  font-family: inherit;
  text-indent: 20px;
}

/* makes pseudo text a little smaller to try and prevent wrapping */
h1.small::after {
  font-size: 99%;
}

<h1 data-content="Full Service Design Studio Full Service Design Studio Full Service Design Studio ull Service Design Studio &nbsp;&nbsp;">Full Service Design Studio Full Service Design Studio Full Service Design Studio Full Service Design Studio</h1>


<h1 data-content="Full Service Design Studio Full Service Design Studio Full Service Design Studio ull Service Design Studio &nbsp;&nbsp;" class="small">Full Service Design Studio Full Service Design Studio Full Service Design Studio Full Service Design Studio</h1>

Number 2

h1 {
  position: relative;
  line-height: 2.2;
  font-family: sans-serif;
}

h1::after {
  content: attr(data-content);
  color: transparent;
  z-index: -1;
  position: absolute;
  text-decoration: underline #46989C 28px;
  text-underline-offset: 10px;
  top: 0;
  left: 20px;
  height: 100%;
  font-family: inherit;
}

<h1 data-content="Full Service Design Studio Full Service Design Studio Full Service Design Studio ull Service Design Studio">Full Service Design Studio Full Service Design Studio Full Service Design Studio Full Service Design Studio</h1>