Skip to main content
kineticcreative123
Inspiring
March 26, 2020
Question

Need help with right aligning line behind text

  • March 26, 2020
  • 17 replies
  • 2675 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 is closed to new replies. Start a new post to keep the conversation going.

    17 replies

    Legend
    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
    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? 

     

    kineticcreative123
    Inspiring
    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;
    }


    Weird. The line is missing. I replaced the css with above and added the span. Also removed the font-size it was in the td tag. 

     

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
     <script src="https://kit.fontawesome.com/67649559e7.js" crossorigin="anonymous"></script>
    
    </head>
    <body>
    
     <head>
      
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
      <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
      <!--  General CSS  -->
      <style type="text/css">
        .main_container{
          max-width: 740px;
          height: 100%;
          margin: 10px auto 0px auto;
        }
        .in_container{
          background: #fafafa;
          border-radius: 2px;
          box-shadow: 0 0 6px #c9d1de;
          -webkit-box-shadow: 0 0 6px #c9d1de;
          -moz-box-shadow: 0 0 6px #c9d1de;
          -o-box-shadow: 0 0 6px #c9d1de;
        }
        .back_link{
          display: block;
          text-decoration: none;
          margin-top: 80px;
          text-align: center;
          font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
          color: #3E3E3E;
          font-size: 16px;
          letter-spacing: 1px;
        }
        .back_link .back_arrow_icon{
            vertical-align: middle;
            margin-right: 10px;
        }
        html{
            width: 100%;
        }
        body{
          width: 100%;
          margin:0;
          padding:0;
          -webkit-font-smoothing: antialiased;
          mso-margin-top-alt:0px;
          mso-margin-bottom-alt:0px;
          mso-padding-alt: 0px 0px 0px 0px;
          background: #eef1f2;
          font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }
        p,h1,h2,h3,h4{
          margin-top:0;
          margin-bottom:0;
          padding-top:0;
          padding-bottom:0;
        }
        table{
          font-size: 14px;
          border: 0;
        }
        img{
          border: none!important;
        }
    	  .line {
    z-index: 1000;
    
    }
    .underline {
    position: absolute;
    bottom: 5px;
    left: -4px;
    height: 0.28em;
    background-color: #00ff99;
    z-index: -999;
    width: 100%;
    display: block;
    }
      </style>
      <!--  Responsive CSS  -->
      <style type="text/css">
        @media only screen and (max-width: 600px) {
          body[yahoo] .full_width_600 {width:90% !important;
    		
        }
        @media only screen and (max-width: 700px) {
          body[yahoo] .full_width_700 {width:100% !important;}
          body[yahoo] .txt_center {text-align:center !important;}
          body[yahoo] .separator {height: 40px !important;}
        }
    		
    	  
      </style>
    
      </head>
      <body style="margin: 0; padding: 0;" yahoo="fix">
    
        <div class="main_container">
          <!--  Header  -->
    		
          <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;background-color: white">
    		  <tr><td height="35" width="100%" style="style="height:35px;""></td></tr>
            <tr>
              <td align="center">
    			  
                <table class="full_width_700" width="87%" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
                  <tr><td height="10" width="100%" style="height:10px;"></td></tr>
                  <tr>
                    <td>
                      <!--  Header Logo  -->
    					
                      <table class="full_width_700 txt_center" width="65%" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
    					  
                        <tr>
                          <td>
                            <a href="http://www.ryanhallmedia.com/thirdspace">
                              <img src="http://offers.premierinc.com/rs/381-NBB-525/images/stockcd_newsletter_logo.png" alt="Acme" title="acme" width="180" border="0" style="color: #595959; font-family: Helvetica, Arial, sans-serif; font-size: 22px;"/>
                            </a>
                        </td>
                        </tr>
                      </table>
                      <!--  End Header Logo  -->
                      <!--  Date  -->
                      <table class="full_width_700" width="34%" align="right" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
                        <tr><td height="10" width="100%" style="height:20px;"></td></tr>
                        <tr>
                          <td class="txt_center" style="text-align:right;">
                            <table class="full_width_700 txt_center" align="right" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
                              <td style="color: #8b8e94; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700; letter-spacing:0.5px; text-transform:capitalize;">
                                SHOP NOW | LEARN MORE
                              </td>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!--  End Date  -->
                    </td>
                  </tr>
    				<tr><td height="35" width="100%" style="height:35px;"></td></tr>
                  <tr><td  width="100%" style="border-top: 1px solid #cccccc;"></td></tr>
    				<tr><td height="25" width="100%" style="height:25px;"></td></tr>
                </table>
              </td>
            </tr>
          </table>
          <!--  End Header  -->
          <!-- In Container -->
          <table class="in_container" border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
            <tr>
              <td>
                <!--  Hero  -->
                <table border="0" cellpadding="0" cellspacing="0"  width="100%" align="center" >
    				<tr><img src="http://offers.premierinc.com/rs/381-NBB-525/images/BestSellers Copy.jpg" width="100%" style="width: 100% !important; margin: 0; padding: 0; position: relative;" border="0"></tr>
                  
                 
                </table>
                <!--  End Hero  -->
                <!-- About  -->
                <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" bgcolor="ffffff" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color:#ffffff;">
                  <tr><td height="65px" width="100%" style="height:65px;"></td></tr>
                  <tr>
                    <td align="center">
                      <table class="full_width_600" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
                        <tr>
                          <td>
                            <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 <span style="white-space: nowrap; position: relative;">dolor sit amet.<span class="underline"></span></span>
    </div>	
    
    
    </td>
    </tr>
    </table>
                          </td>
                        </tr>
                        <tr><td height="15px" width="100%" style="height:15px;"></td></tr>
                        <tr>
                          <td>
                            <table width="100%" border="0" cellpadding="0" cellspacing="0" style="max-width: 600px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
                              <tr>
                                <td style="text-align:left; color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 20px;">
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor faucibus enim, at euismod ex aliquet id. Aliquam venenatis, tellus fermentum ullamcorper rhoncus, arcu purus cursus odio, vel sollicitudin nunc libero vel ipsum. Quisque posuere vehicula sem ut pharetra. Integer imperdiet ante ut ex tincidunt.
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
    					  <tr><td height="15px" width="100%" style="height:15px;"></td></tr>
    					<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
    					  <tr>
                    <td align="center">
                      <!--  Download Button  -->
                      <table width="200" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="center">
                        <tr>
                          <td width="100%" height="15"></td>
                        </tr>
                        <tr>
                          <td>
                            <table width="100%" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;">
                              <tr>
                                <td align="center" style="text-align:center;">
                                  
    								<a href="http://"
    style="background-color:#ffffff;border:3px solid #0841E3;;color:#0841E3;display:inline-block;font-family: Arial, Helvetica, sans-serif;font-weight:700;font-size:16px;line-height:40px;text-align:center;text-decoration:none;width:185px;-webkit-text-size-adjust:none;mso-hide:all;">BROWSE NOW</a>
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                        <tr>
                          <td width="100%" height="15"></td>
                        </tr>
                      </table>
                      <!--  End Download Button  -->
                    </td>
                  </tr> 
    			<tr><td height="40px" width="100%" style="height:40px;"></td></tr>
                      </table>
    					
    					
                    </td>
                  </tr>
    				<tr>
                    <td style="background-color: #F0F3FE" align="center">
                      <table class="full_width_600" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
    					  <tr><td height="25px" width="100%" style="height:25px;"></td></tr>
                        <tr>
                          <td>
                            <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" style=" text-align:left; color: #0841E4; font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 700;line-height:24px;"> sign up for a business membership</td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                       
                        <tr>
                          <td>
                            <table width="100%" border="0" cellpadding="0" cellspacing="0" style="max-width: 600px;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
                              <tr>
                                <td align="left" style=" text-align:left; color: #0841E4; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 400;line-height:24px;">-it's free!</td>
                              </tr>
                            </table>
                          </td>
                        </tr>
    					  
    					<tr><td height="20px" width="100%" style="height:20px;"></td></tr>
    					  <tr>
                    <td align="center">
                
                    </td>
                  </tr> 
    					  
                      </table>
    					
    					
                    </td>
                  </tr>
                  <tr><td height="80px" width="100%" style="height:80px;"></td></tr>
                </table>
                <!-- End About  -->
               
                
                <!-- Split -->
                <table class="full_width_700" width="100%" cellpadding="0" align="center" cellspacing="0" style="width: 100%; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;background-color: #ffffff;" class="full_width_600">
                  <tr>
                    <td>
                      
                      <!--  spacing  -->
                      <table width="30" height="10" border="0" cellpadding="0" cellspacing="0" align="left" class="full_width">
                        <tr>
                          <td>&nbsp;</td>
                        </tr>
                      </table>
                      <!--  end spacing  -->
                      <!--  right part  -->
                      <table class="full_width_700" width="50%" border="0" cellpadding="0" cellspacing="0" align="left">
                        <tr>
                          <td>
                            <!--  spacing  -->
                            <table width="40" height="10" border="0" cellpadding="0" cellspacing="0" align="left" class="full_width">
                              <tr>
                                <td>&nbsp;</td>
                              </tr>
                            </table>
                            <!--  end spacing  -->
                          </td>
                          <td>
                            <table border="0" cellpadding="0" cellspacing="0" align="center" class="quote_content_width">
                              <tr>
                                <td width="100%" height="20"></td>
                              </tr>
                              <tr>
                                <td>
                                  <!-- Text -->
                                  <table class="full_width_700" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;text-align:center;">
                                    <tr>
                                      <tr><td height="10px" width="100%" style="height:10px;"></td></tr>
                                      <td>
                                        <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" style="text-align:left; color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 700; line-height:23px;">Product name goes here, up to 2 lines if possible</td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>
                                    <tr><td height="15px" width="100%" style="height:15px;"></td></tr>
                                    <tr>
                                      <td>
                                        <table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
                                          <tr>
                                            <td style="text-align:left; color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 600; line-height: 22px;">
                                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor faucibus enim, at euismod ex aliquet id. 
                                            </td>
                                          </tr>
    										<tr><td height="15" width="100%" style="height:15px;"></td></tr>
    										<tr><td style="color: #cc0000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400;text-align:left;">Reg. price: <strike>$36.22</strike></td><tr>
    										<tr><td height="5" width="100%" style="height:5px;"></td></tr>
    										<td style="color: #0841E3; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700;text-align:left;">Business member price: $30.23</td></tr>
    										
                                        </table>
                                      </td>
                                    </tr>
                                  </table>
                                  <!-- End Text -->
                                </td>
                              </tr>
                              <tr>
                                <td width="100%" height="30"></td>
                              </tr>
                              <tr>
                                <td>
                                  <!--  Download Button  -->
                                  <table width="200" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;  border-radius:2px;" class="center">
                                    <tr>
                                    
                                    </tr>
                                    <tr>
                                      <td>
                                        <table width="100%" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;">
                                          <tr>
                                            <td align="center" style="text-align:center;">
                                              <a href="http://www.ryanhallmedia.com" style="background-color:#ffffff;border:3px solid #0841E3;;color:#0841E3;display: block; width: 100%;font-family: Arial, Helvetica, sans-serif;font-weight:700;font-size:16px;line-height:40px;text-align:center;text-decoration:none;width:175px;-webkit-text-size-adjust:none;mso-hide:all;">BUY NOW</a>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>
                                    <tr>
                                      <td width="100%" height="15"></td>
                                    </tr>
                                  </table>
                                  <!--  End Download Button  -->
                                </td>
                              </tr>
                              <tr>
                                <td width="100%" height="30"></td>
                              </tr>
                            </table>
                          </td>
                          <td>
                            <!--  spacing  -->
                            <table width="20" height="10" border="0" cellpadding="0" cellspacing="0" align="left" class="full_width">
                              <tr>
                                <td>&nbsp;</td>
                              </tr>
                            </table>
                            <!--  end spacing  -->
                          </td>
                        </tr>
                      </table>
                      <!--  end right part  -->
    			  <!--  left part  -->
                      <table class="full_width_700" width="40%" border="0" cellpadding="0" cellspacing="0" align="center">
                        <tr>
                                      <td>
                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/200_newsletter.png" width="100%" style="margin: 0; padding: 0; position: relative;" border="0" >
                                      </td>
                                    </tr>
                      </table>
                      <!--  end left part  -->
                    </td>
                  </tr>
                </table>
                <!-- End Split -->
    		<!--  Services  -->
                <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;background-color: #ffffff">
                  <tr><td height="80px" width="100%" style="height:80px;"></td></tr>
                  <tr>
                    <td align="center">
                      <table class="full_width_600" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
                        <tr>
                          <td>
                            <!--  Service 1 & 2  -->
                            <table class="full_width_700" width="390" cellpadding="0" align="left" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
                              <tr>
                                <td>
                                  <!--  Service 1  -->
                                  <table class="full_width_700" width="175" cellpadding="0" align="left" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
                                    <tr>
                                      <td>
                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/125_newsletter.png" width="90%" style="max-width: 250px !important; margin: 0; padding: 0; position: relative;" border="0">
                                      </td>
                                    </tr>
                                    <tr><td height="20" width="100%" style="height:20px;"></td></tr>
                                    <tr>
                                      <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700;text-align:left;">Product name goes here, up to 2 lines if possible</td>
                                    </tr>
                                    <tr><td height="10" width="100%" style="height:10px;"></td></tr>
                                    <tr>
                                      <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400;text-align:left;">Business member price:</td>
                                    </tr> 
    								 <tr><td height="5" width="100%" style="height:3px;"></td></tr>
    						   <tr>
                                      <td style="color: #0841E3; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400;text-align:left;word-spacing:15px;"><b>$30.23</b> <s>$36.23</s></i></td>
                                    </tr>
    								  <tr><td height="10" width="100%" style="height:10px;"></td></tr>
                                    <tr><td class="separator" height="1" width="1"></td></tr>
                                  </table>
                                  <!--  End Service 1  -->
                                  <!--  Service 2  -->
                                  <table class="full_width_700" width="175" cellpadding="0" align="right" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
                                    <tr>
                                      <td>
                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/125_newsletter.png" width="90%" style="max-width: 250px !important; margin: 0; padding: 0; position: relative;" border="0">
                                      </td>
                                    </tr>
                                    <tr><td height="20" width="100%" style="height:20px;"></td></tr>
                                    <tr>
                                      <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700;text-align:left;">Product name goes here, up to 2 lines if possible</td>
                                    </tr> 
    								  <tr><td height="10" width="100%" style="height:10px;"></td></tr>
    								    <tr>
                                      <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400;text-align:left;">Business member price:</td>
                                    </tr>
    								 <tr><td height="5" width="100%" style="height:3px;"></td></tr>
    						   <tr>
                                      <td style="color: #0841E3; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400;text-align:left;word-spacing:15px;"><b>$30.23</b> <s>$36.23</s></i></td>
                                    </tr>
                                    <tr><td height="10" width="100%" style="height:10px;"></td></tr>
                                   
                                    
                                  </table>
                                  <!--  End Service 2  -->
                                </td>
                              </tr>
                            </table>
                            <!--  End Service 1 & 2  -->
                            <!--  Service 3  -->
                           <table class="full_width_700" width="175" cellpadding="0" align="right" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
                                    <tr>
                                      <td>
                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/125_newsletter.png" width="90%" style="max-width: 250px !important; margin: 0; padding: 0; position: relative;" border="0">
                                      </td>
                                    </tr>
                                    <tr><td height="20" width="100%" style="height:20px;"></td></tr>
                                    <tr>
                                      <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700;text-align:left;">Product name goes here, up to 2 lines if possible</td>
                                    </tr> 
    								  <tr><td height="10" width="100%" style="height:10px;"></td></tr>
    								    <tr>
                                      <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400;text-align:left;">Business member price:</td>
                                    </tr>
    								
    						   <tr><td height="5" width="100%" style="height:3px;"></td></tr>
    						   <tr>
                                      <td style="color: #0841E3; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400;text-align:left;word-spacing:15px;"><b>$30.23</b> <s>$36.23</s></i></td>
                                    </tr>
                                    <tr><td height="10" width="100%" style="height:10px;"></td></tr>
                                   
                                    <tr><td class="separator" height="1" width="1"></td></tr>
                                  </table>
    																			   <tr><td height="60" width="100%" style="height:60px;"></td></tr>
                            <!--  End Service 3  -->
                          </td>
                        </tr>
                       
                      </table>
                    </td>
                  </tr><tr>
                    <td align="center">
                      <table class="full_width_600" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;"></td></tr>
                        <tr>
                          <td>
                            <!--  Service 1 & 2  -->
                            <table class="full_width_700" width="390" cellpadding="0" align="left" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
                              <tr>
                                <td>
                                  <!--  Service 1  -->
                                  <table class="full_width_700" width="175" cellpadding="0" align="left" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
                                    <tr>
                                      <td>
                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/125_newsletter.png" width="90%" style="max-width: 250px !important; margin: 0; padding: 0; position: relative;" border="0">
                                      </td>
                                    </tr>
                                    <tr><td height="20" width="100%" style="height:20px;"></td></tr>
                                    <tr>
                                      <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700;text-align:left;">Product name goes here, up to 2 lines if possible</td>
                                    </tr>
                                    <tr><td height="10" width="100%" style="height:10px;"></td></tr>
                                    <tr>
                                      <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400;text-align:left;">Business member price:</td>
                                    </tr> 
    								 <tr><td height="5" width="100%" style="height:5px;"></td></tr>
    						   <tr>
                                      <td style="color: #0841E3; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700;text-align:left;">$30.23</td>
                                    </tr>
                                    <tr><td height="10" width="100%" style="height:10px;"></td></tr>
    								  <tr><td height="10" width="100%" style="height:10px;"></td></tr>
                                    <tr><td class="separator" height="1" width="1"></td></tr>
                                  </table>
                                  <!--  End Service 1  -->
                                  <!--  Service 2  -->
                                  <table class="full_width_700" width="175" cellpadding="0" align="right" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
                                    <tr>
                                      <td>
                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/125_newsletter.png" width="90%" style="max-width: 250px !important; margin: 0; padding: 0; position: relative;" border="0">
                                      </td>
                                    </tr>
                                    <tr><td height="20" width="100%" style="height:20px;"></td></tr>
                                    <tr>
                                      <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700;text-align:left;">Product name goes here, up to 2 lines if possible</td>
                                    </tr> 
    								  <tr><td height="10" width="100%" style="height:10px;"></td></tr>
    								    <tr>
                                      <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400;text-align:left;">Business member price:</td>
                                    </tr>
    								 <tr><td height="5" width="100%" style="height:3px;"></td></tr>
    						   <tr>
                                      <td style="color: #0841E3; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400;text-align:left;word-spacing:15px;"><b>$30.23</b> <s>$36.23</s></i></td>
                                    </tr>
                                    <tr><td height="10" width="100%" style="height:10px;"></td></tr>
                                   
                                    <tr><td class="separator" height="1" width="1"></td></tr>
                                  </table>
                                  <!--  End Service 2  -->
                                </td>
                              </tr>
                            </table>
                            <!--  End Service 1 & 2  -->
                            <!--  Service 3  -->
                           <table class="full_width_700" width="175" cellpadding="0" align="right" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; text-align:center;" class="full_width_600">
                                    <tr>
                                      <td>
                                        <img src="http://offers.premierinc.com/rs/381-NBB-525/images/125_newsletter.png" width="90%" style="max-width: 250px !important; margin: 0; padding: 0; position: relative;" border="0">
                                      </td>
                                    </tr>
                                    <tr><td height="20" width="100%" style="height:20px;"></td></tr>
                                    <tr>
                                      <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700;text-align:left;">Product name goes here, up to 2 lines if possible</td>
                                    </tr> 
    								  <tr><td height="10" width="100%" style="height:10px;"></td></tr>
    								    <tr>
                                      <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 400;text-align:left;">Business member price:</td>
                                    </tr>
    						   <tr><td height="5" width="100%" style="height:5px;"></td></tr>
    						   <tr>
                                      <td style="color: #0841E3; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 700;text-align:left;">$30.23</td>
                                    </tr>
                                    <tr><td height="10" width="100%" style="height:10px;"></td></tr>
                                   
                                    <tr><td class="separator" height="1" width="1"></td></tr>
                                  </table>
                            <!--  End Service 3  -->
                          </td>
                        </tr>
    					<tr><td height="70px" width="100%" style="height:70px;"></td></tr>
    					<tr><td height="17px" width="100%" style="height:10px;border-top: 2px solid #0841E4;"></td></tr>
    
    																			  <tr>
                    <td style="background-color: #ffffff" align="center">
                      <table class="full_width_600" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" border:0;>
    					
                            
    						  	<table width="100%" border="0" cellpadding="0" cellspacing="0"  style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full">
    										<tr>
    <td width="200" align="left" style=" text-align:left; color: #000000; font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 700;">Contact Us</td>
    <td>&nbsp;</td>
    <td style="color: #000000; font-size:10px font-family: 'Open Sans', Helvetica, Arial, sans-serif;line-height:25px;"><i class="fas fa-phone-alt"></i>
    
      Phone: 123-456-7890<br>
    <i style-"font-size:12px;" class="far fa-envelope"></i>  Email: me@mydomain.com</td>
    </tr>
    									</table>
    						  
                          </td>	
                        </tr>
    					  
                       <tr><td height="17px" width="100%" style="height:10px;border-bottom: 2px solid #0841E4;"></td></tr>
                      
    					  
    					<tr><td height="15px" width="100%" style="height:15px;"></td></tr>
    					  <tr>
                    <td align="center">
                
                    </td>
                  </tr> 
    					  
                      </table>
    					
    					
                    </td>
                  </tr>
                        <tr><td height="40px" width="100%" style="height:40px;"></td></tr>
                      </table>
                    </td>
                  </tr>
    																		   
                </table>
                <!--  End Services  -->
               
              
               
              </td>
            </tr>
    																		   
          </table>
          <!-- End In Container -->
          <!--  Footer  -->
          <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #F0F3FE">
            <tr>
              <td align="center">
                <table class="full_width_700" border="0" cellpadding="0" cellspacing="0" align="center"style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
                  <tr><td height="40" width="100%" style="height:40px;"></td></tr>
                  <tr>
                    <td>
                      <!--  Social Icons  -->
                      <table class="txt_center" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
                        <tr>
                          <td align="left">
                            <a href="https://www.facebook.com/premierhealthcarealliance/">
                               <img src="http://offers.premierinc.com/rs/381-NBB-525/images/facebook_footer_logo.png" alt="Facebook" title="Facebook" />
                            </a>
                          </td> 
                          <td height="1" width="15px">
                          </td>
                            <td align="left">
                            <a href="https://www.instagram.com/premierha/">
                              <img src="http://offers.premierinc.com/rs/381-NBB-525/images/instagram_footer_logo.png" alt="Instagram" title="Instagram" />
                            </a>
                          </td>
    						 <td height="1" width="15px">
                          </td>
    						<td align="left">
                            <a href="https://www.linkedin.com/company/premierinc">
                               <img src="http://offers.premierinc.com/rs/381-NBB-525/images/linkedin_footer_logo.png" alt="Linkedin" title="Linkedin" />
                            </a>
                          </td>
    						 <td height="1" width="15px">
                          </td>
    						 <td align="left">
                            <a href="https://twitter.com/PremierHA">
                               <img src="http://offers.premierinc.com/rs/381-NBB-525/images/twitter_footer_logo.png" alt="Twitter" title="Twitter" />
                            </a>
                          </td>
                        </tr>
                      </table>
                      <!--  End Social Icons  -->
                      <!--  Info  -->
                      <table class="full_width_700" width="85%" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
                        <tr><td height="30" width="100%" style="height:30px;"></td></tr>
                        <tr>
                          <td class="txt_center" style="text-align:center;">
                            <table class="txt_center" width="92%" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0;">
                              <tr>
                                <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 8px; font-weight: 400;  text-align:center;line-height: 13px;">
                                  All products or services purchased through Premier Marketplace, LLC d/b/a/ stockd (“stockd”) are purchased from the applicable Seller, not from http://stockd.com . Each seller of products or services on stockd is responsible for all information and other materials the seller submits related to its products or services, including descriptions of the products’ functionalities, features, and components, and images related to its products or services. Stockd is not a health care provider, and it and its affiliates do not actively monitor or approve any of these submissions and are not responsible or liable for verifying the accuracy of these submissions. Stockd and its affiliates provide this information and these materials on an “as is” basis, with no representations or warranties of any kind, including with respect to quality, security, merchantability, non-infringement, or fitness for a particular purpose. To the extent your purchase includes any discount or reduction in price, you agree that you will, to the extent applicable to you, fully and accurately disclose and appropriately reflect any such discounts or other reduction in price in the costs claimed or charges made by you under any federal health care program. Please see stockd’s full Terms & Conditions for additional information.
                                </td>
                              </tr>
                              <tr><td height="10" width="100%" style="height:10px;"></td></tr>
                              <tr>
    																			    <tr>
                                <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 8px; font-weight: 400;  text-align:center;line-height: 13px;">
                                  Copyright © 2020 stockd a Premier Marketplace, LLC All Rights Reserved.</a>
                                </td>
                              </tr>
    						  <tr><td height="10" width="100%" style="height:10px;"></td></tr>
                                <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 8px; font-weight: 400; text-align:center;">
                                  Premier intends to comply with all applicable federal, state, and local laws, rules and regulations, including the newly enacted CAN-SPAM Act of 2003, which regulates the transmission of electronic mail. 
    If you do not wish to receive any further email from us, please unsubscribe.</a>
                                </td>
                              </tr>
    						   <tr><td height="10" width="100%" style="height:10px;"></td></tr>
                                <td style="color: #000000; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 8px; font-weight: 400; text-align:center;">
                                 <a href="https://www.stockd.com/wcs/shop/en/stockd/stockd-privacy-policy" target="_blank" >Privacy Policy</a>   |   <a href="https://www.stockd.com/wcs/shop/en/stockd/terms-conditions" target="_blank" >Terms and Conditions</a></td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!--  End Info  -->
                    </td>
                  </tr>
                  <tr><td height="30" width="100%" style="height:30px;"></td></tr>
                </table>
              </td>
            </tr>
          </table>
          <!--  End Footer  -->
        </div>
    
      </body>
    </html>
    <!-- partial -->
      
    </body>
    </html>

     

     

    Legend
    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
    Inspiring
    March 30, 2020

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

    Nancy OShea
    Community Expert
    Community Expert
    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
    kineticcreative123
    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
    Community Expert
    Community Expert
    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