CODEWITHSUNDEEP
htmlcss
Kalyan Chavali
Kalyan Chavali

Reputation: 1348

Underline for entire line when using span and position:absolute

Below is the html I am using to display some content. I have learnt that an underline wouldn't be visible in hyperlinks when using "position:absolute", which is why I have added the style text-decoration: underline; , for the span elements.

However, I am getting underlines where the span element displays a text. I would link to have a underline the entire line containing all the text's of span.

Please check the snippet and output here . However, I need a underline on entire line.

<!DOCTYPE html>
<html>
<body>
<style type="text/css">
a {
    text-decoration: underline; }
</style>

<a href="http://www.w3schools.com/html/" >
<div class="sans-serif" >
<font style="font-weight:normal; font-size:12.00pt; font-style:normal; ">
<span style="position:absolute; top:94px; left:42px;text-decoration: underline;  ">Text2</span>
<span style="position:absolute; top:94px; left:213px;text-decoration: underline; ">Text3</span>
<span style="position:absolute; top:94px; left:418px;text-decoration: underline; ">Text4</span>
</font>
</a>
</body>
</html>

I would need the below output, but using span elements as shown above using position:absolute

<!DOCTYPE html>
<html>
<body>
<style type="text/css">
a {
    text-decoration: underline; }
</style>

<a href="http://www.w3schools.com/html/" >
<div class="sans-serif" >
<font style="font-weight:normal; font-size:12.00pt; font-style:normal; ">
Text 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text 3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text4
</font>
</a>
</body>
</html>

Upvotes: 0

Views: 2496

Answers (4)

Lokesh Waran
Lokesh Waran

Reputation: 113

CSS :

a {
     position:absolute;
     border-bottom:1px solid red;
     text-decoration:none;     
}
a span {  
     margin-left:100px;
}
a span:first-child{
     margin:0px;
}

HTML :

<p class="sans-serif"> 
<a href="http://www.w3schools.com/html/" >
<span>Text2</span>
<span >Text3</span>
<span >Text4</span>    
</a>    
</p>

Upvotes: 0

vikrantnegi
vikrantnegi

Reputation: 2472

If you want to can add the :before and :after pseudo classes after the span tag to add the underline 

<!DOCTYPE html>
<html>
<body>
<style type="text/css">
a {
    text-decoration: underline; }

    span:nth-child(2):before{
    	position: absolute;
    	content: "";
    	width: 500%;
    	right: 50%;
    	height: 1px;
    	background-color: #000;
		bottom: 2px;
    }

    span:nth-child(2):after{
    	position: absolute;
    	content: "";
    	width: 500%;
    	left: 50%;
    	height: 1px;
    	background-color: #000;
		bottom: 2px;
		}

	</style>

<a href="http://www.w3schools.com/html/" >
<div class="sans-serif" >
<font style="font-weight:normal; font-size:12.00pt; font-style:normal; ">
<span style="position:absolute; top:94px; left:42px;text-decoration: underline; ">Text2</span>
<span style="position:absolute; top:94px; left:213px;text-decoration: underline; ">Text3</span>
<span style="position:absolute; top:94px; left:418px;text-decoration: underline; ">Text4</span>
</font>
</a>
</body>
</html>

Upvotes: 0

KAD
KAD

Reputation: 11112

I have restuctured you HTML, no need to use font tags and unnecessary <div>s inside your HTML. Besides, it is best practice to make all of your style inside the <style> tag and not inline.

I have made the <a> display as table and made all the spans display as table-cell in order to apply a full border beneath them, and upon the hover of the <a> the border is removed.

I have also created specific classes for the first and last spans in order to align them left and right in their cells. Other cells will be aligned center.

Working snippet below.

<!DOCTYPE html>
<html>
<body>
<style type="text/css">

#wrapper
{
   padding-top:5%;
    padding-left:10%;
}
a {
    text-decoration: none;
    display:table;
   
    width:50%;
     font-weight:normal; 
    font-size:12.00pt; 
     font-style:normal; 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
  }

a span {
     white-space:nowrap; 
     display:table-cell; 
     border-bottom: solid 1px #0000EE; 
     width:30%;
     text-align:center;
  }

a:hover span {
   border-bottom: none; 
}

.first
{
   text-align:left;
 }

.last
{
   text-align:right;
 }

</style>
<div id="wrapper">
<a href="http://www.w3schools.com/html/" >
     <span class="first" >Text2</span>
     <span>Text3</span>
     <span class="last"  >Text4</span>
</a>
</div>
</body>
</html>

Upvotes: 2

G.L.P
G.L.P

Reputation: 7207

You can try like this : Demo

HTML:

<p class="sans-serif"> 
<a href="#">
<span>Text2</span>
<span >Text3</span>
<span >Text4</span>    
</a>    
</p>

CSS:

 a {
     clear:both;
     position:relative;
     top:94px;
     border-bottom:1px solid red;
     left:42px;
     text-decoration:none;
     width:100%;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -ms-box-sizing: border-box;
     box-sizing: border-box;
 }
 a span {
     clear:both;
     border-bottom:1px solid red;
     margin-left:95px;
 }
 a span:first-child {
     clear:both;
     border-bottom:1px solid red;
     margin-left:0px;
 }

Upvotes: 0

Related Questions