2

I want to print a line after every anchor link.

I am using div with style defining the line properties. But it's not printing after every link, instead printing for alternate links.

The HTML code is pretty straightforward, nothing complex, but still giving wrong output. I need a line after each link.

<a href='#'>Movie 1</a><br>
<div style='width: 100%;border-bottom: 0.5px solid black;'></div>
<a href='#'>Movie 2</a><br>
<div style='width: 100%;border-bottom: 0.5px solid black;'></div>
<a href='#'>Movie 3</a><br>
<div style='width: 100%;border-bottom: 0.5px solid black;'></div>
<a href='#'>Movie 4</a><br>
<div style='width: 100%;border-bottom: 0.5px solid black;'></div>
<a href='#'>Movie 5</a><br>
<div style='width: 100%;border-bottom: 0.5px solid black;'></div>
<a href='#'>Movie 6</a><br>
<div style='width: 100%;border-bottom: 0.5px solid black;'></div>
<a href='#'>Movie 7</a><br>
<div style='width: 100%;border-bottom: 0.5px solid black;'></div>

Code link: http://jsfiddle.net/64cfuvL1/

jo_va
  • 13,504
  • 3
  • 23
  • 47
Zhrez Pain
  • 327
  • 1
  • 2
  • 10

5 Answers5

2

Just change 0.5px to 1px in your code and it will work.

Values less than 1px may show nothing since the smallest unit your screen can display is 1px

See this answer for more information about borders less than a pixel thick.

<a href='#'>Movie 1</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 2</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 3</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 4</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 5</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 6</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 7</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>

Another solution is to use <hr> to create a horizontal line.

hr {
  margin-top: 0px;
  margin-bottom: 0px;
}
<a href='#'>Movie 1</a><br>
<hr>
<a href='#'>Movie 2</a><br>
<hr>
<a href='#'>Movie 3</a><br>
<hr>
<a href='#'>Movie 4</a><br>
<hr>
<a href='#'>Movie 5</a><br>
<hr>
<a href='#'>Movie 6</a><br>
<hr>
<a href='#'>Movie 7</a><br>
<hr>

And yet another solution is to use the ::after pseudo-class to add a line:

.border-bottom::after {
  content: '';
  display: block;
  width: 100%;
  border-bottom: 1px solid black;
  margin-bottom: -17px;
}
<a href='#' class="border-bottom">Movie 1</a><br>
<a href='#' class="border-bottom">Movie 2</a><br>
<a href='#' class="border-bottom">Movie 3</a><br>
<a href='#' class="border-bottom">Movie 4</a><br>
<a href='#' class="border-bottom">Movie 5</a><br>
<a href='#' class="border-bottom">Movie 6</a><br>
<a href='#' class="border-bottom">Movie 7</a><br>
jo_va
  • 13,504
  • 3
  • 23
  • 47
0

Use tag. This is easier.

<p>Your Text 1</p>
<hr>
<p>Your Text 2</p>
0

If you want to use your style of code. Try this it works fine.

<div style='width: 100%;border: 0.5px solid black;'></div
Raahul
  • 399
  • 1
  • 3
  • 11
0

You should not be manually doing this. Use the <hr /> tag.

The HTML <hr> element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

Source: MDN

<a href='#'>Movie 1</a>
<hr />

<a href='#'>Movie 2</a>
<hr />

<a href='#'>Movie 3</a>
<hr />

<a href='#'>Movie 4</a>
<hr />

<a href='#'>Movie 5</a>
<hr />

<a href='#'>Movie 6</a>
<hr />

<a href='#'>Movie 7</a>
<hr />
-3

You could use <hr>, horizontal ruler, but this is not the problem inside your code.

Your code is problamatic, because you are using floats for your border width.

<a href='#'>Movie 1</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 2</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 3</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 4</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 5</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 6</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 7</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>

Change the floating 0.5px to minimum 1px. Otherwise the border will be hidden in unexpacted situations. Mind that the minimum meassure unit on a display is 1px. Everything else is more or less unpredictable, just think of the different hardware, screen resolution or just different browsers. So stay to some best practices and sophisticated standards.

Michael W. Czechowski
  • 3,366
  • 2
  • 23
  • 50
  • You're welcome. And think of using CSS classes instead of the `style` attribute. You are familiar with that? – Michael W. Czechowski Feb 17 '19 at 17:58
  • Yes, this was just for testing purpose :) – Zhrez Pain Feb 17 '19 at 18:00
  • @WillHoskings Could you please specify? – Michael W. Czechowski Feb 17 '19 at 18:05
  • @MichaelCzechowski You should not be using `
    `s as separation markers in the first place. The `
    ` tag was specifically designed for this task. This question is more of an XY question in my opinion.
     –  Feb 17 '19 at 18:07
  • You've seen, that I slightly changed the code and left as much as possible pristine and untouched? I am not here for teaching someone programming paradigms or anything else. He/She had a problem, the code had one but, I've fixed it. This is what we are doing here, nothing more. Don't you agree? – Michael W. Czechowski Feb 17 '19 at 18:14