CODEWITHSUNDEEP
csshtml
Isai Landa
Isai Landa

Reputation: 13

What is the best way to make a line between 2 span?

I have 2 span

<span style="float:left;">text1</span>
<span style="float:right;">text2</span>

How can I put a bottom line between the words? using css

Like _______________ this
and like ____________ this
and ____________ like this

Upvotes: 0

Views: 1165

Answers (4)

user3926016
user3926016

Reputation:

My solution only works if you can allow for a container for each line that specifies the maximum width.

.container {
  display: flex;
  max-width: 80%; /* adapt this to your needs */
  clear: both;
}

.pull-left {
  float: left;
  display: inline-flex;
  width: 100%;
}

.pull-right {
  float: right;
  display: inline-flex;
  width: auto;
}

.pull-left::after {
  content: '\200B';
  border-bottom: 1px solid #000000;
  width: 100%;
}
<div class="container">
  <span class="pull-left">text1</span>
  <span class="pull-right">text2</span>
</div>
<div class="container">
  <span class="pull-left">longertext3</span>
  <span class="pull-right">4</span>
</div>

Upvotes: 2

zer00ne
zer00ne

Reputation: 43880

I made everything <div>s then wrapped everything into a <div class="wrap> and then placed a <div class="mid"> inbetween the first 2 <div>s left and right. The line is .mid's border-bottom. I assigned display: table-cell to .left, .right, and .mid and .wrapas a table-row. This table layout is used to ensure consistency but I wouldn't use it for large projects. Btw, this is responsive as well. You can stretch and shrink it as little or as much as possible and it's simple layout cannot break.

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font: 400 32px/1.5'Source Code Pro';
}
.mid {
  padding: 0 0 -15% 0;
  border-bottom: 2px solid black;
  display: table-cell;
  width: 60vw;
}
.wrap {
  display: table-row;
  width: 100%;
  margin-top: -50%;
}
.right {
  float: right;
  width: 20vw;
  display: table-cell;
  text-align: left;
}
.left {
  float: left;
  width: 20vw;
  display: table-cell;
  text-align: right;
}
<div class="wrap">

  <div class="left">text1</div>
  <div class="mid"></div>
  <div class="right">text2</div>

</div>

Upvotes: 0

GolezTrol
GolezTrol

Reputation: 116110

Maybe not the nicest solution, but it works. It doesn't need a separate span element for the line, but it does use a container element per text line.

The black bottom line is created using a border on a pseudo-element on the left text. The line itself has full width, but the parts under the text are cancelled out because the texts themselves have a white border.

So disadvantages are that you need the container, it won't work well if you have an image background, and it probably won't work well if the two texts are larger than the available space on a line.

Nevertheless, I hope you can still use it. 

.line {
  display: block;
  position: relative;
  
}
.left, 
.right {
  display: inline-block;
  border-bottom: 1px solid white;
}

.left, 
.left::after {
  left: 0;
}

/* Left text is normal (not absolute), so it enforces the line to have the right hight (otherwise, multiple lines will fall on top of each other */
.right,
.left::after {
  position: absolute;
  top: 0;
}

.right {
  right: 0;
  padding-left: 0.5em; /* White space between bottomline and right text. */
}

.left {
  padding-right: 0.5em; /* White space between left text and bottom line */
}

.left::after {
  display: block;
  content: '\200B'; /* Any invisible character to enforce the right height. */
  border-bottom: 1px solid black;
  right: 0;
  z-index: -1; /* Pseudo element needs to be behind left text content */
}
<span class='line'>
  <span class='left'>This is a text</span>
  <span class='right'>This as well</span>
</span>
<span class='line'>
  <span class='left'>Another</span>
  <span class='right'>Maybe a bit longer</span>
</span>
<span class='line'>
  <span class='left'>Short</span>
  <span class='right'>Text</span>
</span>

Upvotes: 1

hurtbox
hurtbox

Reputation: 386

I'm not too sure if this is what you want, but I replaced the Underlines with Horizontal Rows between the Spans

SPAN,
HR {
  FLOAT: LEFT;
}
HR {
  WIDTH: 100PX;
}
<!DOCTYPE HTML>
<HTML>

<BODY>

  <SPAN>Text 1</SPAN>
  <HR/>
  <SPAN>Text 2</SPAN>
  <BR/>
  <SPAN>Text 3</SPAN>
  <HR/>
  <SPAN>Text 4</SPAN>
  <BR/>
  <SPAN>Text 5</SPAN>
  <HR/>
  <SPAN>Text 6</SPAN>
  <BR/>

</BODY>

</HTML>

Upvotes: -1

Related Questions