Question 225984 in Html Question posted in
Some basic documentation can be found here.

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

#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 then when we scale down to say mobile view it only underlines the bottom line of the text. is there a way to make it underline every line?

Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0 
    #full-service-design-studio {
  
  text-decoration: underline  #46989C;
}
    <h1 id="full-service-design-studio">Full Service Design Studio</h1>
    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search