Skip to main content
kineticcreative123
kineticcreative123
Inspiring
March 26, 2020
Question

Need help with right aligning line behind text

  • March 26, 2020
  • 3 replies
  • 2618 views

Hello, I have style applied to a span that puts a line behind text. The issue I'm having is that I can't get it to right align (at the end of the text not starting at the beginning). Below is my code. Thank you for any help.

 

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Line Under Text</title>
  <style>
	h1{
  color: #000000;
}
span{
  position: relative;
  float: left;
	font-family: 'Montserrat', sans-serif;
}
span:after{
  position: absolute;
  content: "";
  display: block;
  width: 40%;
  height: 10px;
  background: #00ff66;
  bottom: 4px;
  z-index: -1;

}</style>
</head>
<body>
<!-- partial:index.partial.html -->
<h1><span>lorem ipsum dolor sit amet.</span></h1>
<!-- partial -->
  
</body>
</html>

 

 

    This topic has been closed for replies.

    3 replies

    O
    osgood_
    Braniac
    March 31, 2020

    This will work if you insert the <div> into the table cell:

     

     

     

    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
<tr>
<td align="left" width="54%" style="width:54%; text-align:left; color: #000000; font-family: 'Montserrat', sans-serif; font-size: 32px; font-weight: 700; line-height:30px;">


<div class="line">
lorem ipsum dolor sit amet.<span class="underline"></span>
</div>	


</td>
</tr>
</table>

     

     

     

     

    Then amend the css to:

     

    .line {
    position: relative;
    z-index: 1000;
    }
    .underline {
    height: 0.28em;
    background-color: #00ff99;
    position: relative;
    top: -0.42em;
    z-index: -999;
    width: 5.3em;
    margin-left: 8.75em;
    display: block;
    }

      kineticcreative123
      kineticcreative123Author
      Inspiring
      March 31, 2020

      Excellent!! Thanks so much. Works like you said. Don't mean to be a pain but I am guessing there isn't anything I can do to fix this mobile issue? 

       

      O
      osgood_
      Braniac
      March 31, 2020

      Try wrapping the words you require to be underlined in a <span></span> like below:

       

      <div class="line">
      lorem ipsum
      <span style="white-space: nowrap; position: relative;">dolor sit amet.
      <span class="underline"></span></span>
      </div>

       

       

      .line {
      z-index: 1000;
      font-size: 40px;
      }
      .underline {
      position: absolute;
      bottom: 5px;
      left: -4px;
      height: 0.28em;
      background-color: #00ff99;
      z-index: -999;
      width: 100%;
      display: block;
      }

      O
      osgood_
      Braniac
      March 26, 2020
      <!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Line Under Text</title>
<style>
.line {
font-family: 'Montserrat', sans-serif;
position: relative;
}
h1{
color: #000000;
}
.underline {
height: 0.4em;
background-color: red;
position: relative;
top: -0.5em;
z-index: -1000;
width: 4em;
margin-left: 9em;
display: block;
}
</style>
</head>
<body>
<div class="line">
<h1>lorem ipsum dolor sit amet.<span class="underline"></span></h1>
</div>
</body>
</html>
      kineticcreative123
      kineticcreative123Author
      Inspiring
      March 30, 2020

      Perfect!!! Thats it exactly! Thank you thank you!!

      Nancy OShea
      Nancy OShea
      Braniac
      March 26, 2020

      I don't mean to be unkind but this is a really dumb idea.  Keep in mind that underlined text on the web denotes hyperlinked text. 

      If you need to emphasize text, use this.

       

      <h1>Lorem ipsum dolor <em>sit amet</em>.</h1>

       

      CSS

      em {border-bottom:4px solid lawngreen}

       

       

      Nancy O'Shea— Product User, Community Expert &amp; Moderator
      kineticcreative123
      kineticcreative123Author
      Inspiring
      March 26, 2020

      Thank you. Is there a way to push the line up behind the text? The line behind the text is a part of our branding and would need to be like the example above. 

      Nancy OShea
      Nancy OShea
      Braniac
      March 26, 2020

      No, there is no way to adjust it.  A border is either border-top or border-bottom.

      Use Illustrator to create Brand/Logos and export them to SVG (scalable vector graphics).

       

      Nancy O'Shea— Product User, Community Expert &amp; Moderator
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices