Inspiring

Question

Need help with right aligning line behind text

17 replies
2676 views
Translate

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.

O

osgood_

Legend

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

Translate

kineticcreative123Author

Inspiring

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?

Translate

O

osgood_

Legend

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

Translate

O

osgood_

Legend

<!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>

Translate

kineticcreative123Author

Inspiring

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

Translate

Nancy OShea

Community Expert

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}

Translate

Nancy O'Shea— Product User & Community Expert

kineticcreative123Author

Inspiring

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.

Translate

Nancy OShea

Community Expert

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).

Translate

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.