CSS design help to put the content in horizontal line

Question

Need to below type of functionality:

on the left text will be there and then a center line till last on right side.

There are a lot of ways you could approach this, what have you tried so far? — DBS, Sep 13 '21 at 17:45
Hey welcome to SO! You've shared your intent, now share where you're stuck in making your attempt with a reproducible example :) — Chris W., Sep 13 '21 at 17:46

score 1 · Answer 1 · answered Sep 13 '21 at 17:57

Use the pseudo-element ::after or even ::before to make this side line. To make it easy, create a class to add in any head that you want.

    /* your head  */
    h4.side-dashed {
        /* mandatory */
        display: table!important;
        white-space: nowrap;
        overflow: hidden;   
        
        /* depends of your style  */
        line-height: initial;
        padding: 0px;
        margin: 0p;
    }

    /* line  */
    h4.side-dashed:after {
        content: '';
        display: table-cell;
        position: relative;
        border-top: 1px solid #000000; /* color of the line */
        top: 0.5rem; /* config if its too high or low */
        width: 100%; /* size of the line */ 
        left: 0.5rem; /* 'margin' of the line */
    }

<h4 class="side-dashed">My Head</h4>

score -1 · Answer 2 · answered Sep 13 '21 at 17:52

Here is one example how you can do it, with flex:

.container{
  display:flex;
  flex-direction:row;
}

.populate{
  display:flex;
  flex-grow:1;
}

hr{
  width:100%;
  background-color:black;
  margin-left:10px;
}

<div class="container">
  <div>Hello Text</div>
  <div class="populate"><hr></div>
</div>

Tiago Rangel · Answer 3 · 2021-09-17T10:52:45.220

kumar! I hope this should work.

h2 {
    width: 100%;
    text-align: left;
    border-bottom: 0.2em solid #000;
    line-height: 0.08em;
    font-size: 15px;
} 

h2 span { 
    background:#fff; 
    padding:0 5px; 
}

<h2><span>Hello world!</span></h2>

How to do it:

Add the required CSS to make the line and align it:

h2 { /* Get element */
        width: 100%; /* Full width */
        text-align: left; /* float to left */
        border-bottom: 0.2em solid #000; /* Add the black line */
        line-height: 0.08em;
        font-size: 15px; /* Font size */
    } 

    h2 span { /* Get element's label */
        background:#fff; 
        padding:0 5px; /* Add some padding */
    }

Put some HTML

<h2><span>Hello world!</span></h2>
1.   2.    3.           4.     5.
----------------------------------
1. Title
2. Span with elements
3. Text
4. Span end tag
5. Title end tag

CSS design help to put the content in horizontal line

3 Answers3