CODEWITHSUNDEEP
htmlcss
Hotdot Cyber
Hotdot Cyber

Reputation: 393

Adding a horizontal line in between texts in HTML

I want to add a horizontal line in HTML between texts like shown in this screenshot. From this code, I get a line but not centered between the texts. How can I achieve this?

What I need is something like: Publication---------------------Method.

My code:

.horizontal{
    display: inline-block;
    width: 100px;
}
<div class="col-sm-4">
    <h4>Publication <hr class="horizontal"/>Method</h4>
</div

Upvotes: 3

Views: 1038

Answers (3)

Friday Ameh
Friday Ameh

Reputation: 1684

Another solution is to use the pseudo selector ::after

.horizontal::after{
  content: "";
  display: inline-block;
  border:1px solid black;
  margin-left:2px;
  margin-bottom: 3px;
  width: 100px;
}
<div class="col-sm-4">
    <h4>
        <span class="horizontal">Publication</span> 
        Method
    </h4>
</div

Upvotes: 2

Rayees AC
Rayees AC

Reputation: 4659

Add vertical-align property text-top.

vertical-align:text-top;


.horizontal{
    display: inline-block;
    width: 100px;
    vertical-align:text-top;
}
<div class="col-sm-4">
    <h4>Publication<hr class="horizontal"/>Method</h4>
</div

Upvotes: 1

s.kuznetsov
s.kuznetsov

Reputation: 15213

You can set flex rules for the h4 tag. Aligns the center rule align-items: center. This example good aligns your line to the center of the words.

.col-sm-4 h4 {
    display: inline-flex;
    align-items: center;
}

.horizontal{
    /*display: inline-block;*/
    width: 100px;
    margin: 0;
}
<div class="col-sm-4">
    <h4>Publication <hr class="horizontal"/>Method</h4>
</div

Upvotes: 2

Related Questions