CODEWITHSUNDEEP
htmlcss
Isaac
Isaac

Reputation: 170

How to insert line to right of word?

I am creating report with multiple lines, I wanted to insert automated lines without having to press SHIFT plus underscore keyboard. I didn't find anything related to my problem

I wanted something like this model:

Line 1: _____________

Line 2: _____________

Line 3: _____________

Line 4: _____________

I've tried everything with tag <hr>, but it's out of order

<p>Line 1: <hr align="right" width="200"></p>

<p>Line 2: <hr align="right" width="200"></p>

<p>Line 3: <hr align="right" width="200"></p>

<p>Line 4: <hr align="right" width="200"></p>

As you can see, the line goes too far to the right and is not aligned to the text.

How can I make the line be close to the word, as in the model shown?

Upvotes: 1

Views: 77

Answers (3)

A. Meshu
A. Meshu

Reputation: 4148

Alternative for the :after pseudo, you can do something like that:

span {display: inline-block; vertical-align: bottom; width: 200px; border-bottom: 1px solid black;}
<p>Line 1<span></span></p>
<p>Line 2<span></span></p>
<p>Line 3<span></span></p>
<p>Line 4<span></span></p>

Upvotes: 1

gavgrif
gavgrif

Reputation: 15489

You can do this with CSS - using the ::after pseudo-element and styling it to have a bottom border and use a margin-left to move it to the right of the text.

p::after {
 content: ' ';
 width: 200px;
 border-bottom: solid 1px #333;
 display: block;
 margin-left: 50px
}
<p>Line 1:</p>

<p>Line 2:</p>

<p>Line 3:</p>

<p>Line 4:</p>

Upvotes: 1

strek
strek

Reputation: 1230

Is this what you are expecting ? 

<div style="display:flex;">
<div><p>name</p></div>
<div style="width:30px;border-bottom: solid; height:35px;"></div>
</div>

Upvotes: 0

Related Questions