How can I fill blank space after word in sentence line with space line? at HTML, CSS

Question

Question. sentence with half-line

In HTML / CSS.

like the picture uploaded, I wanna fill the blank space after some words with line.

the length of words can be changed.

If the full width is 1000px and the word is 100px-long, then half-line is 900px long.

And the word is 350px, then half-line is 650px-long.

How can I make it by CSS?

Let me know please..

Add you HTML & CSS code here – Lalji Tadhani Feb 13 '20 at 05:24 — Lalji Tadhani, Feb 13 '20 at 05:24

score 1 · Accepted Answer · answered Feb 13 '20 at 05:26

1

Hope this help :D

h2 {
    overflow: hidden;
}

h2:after {
    content:"";
    display: inline-block;
    height: 0.5em;
    vertical-align: bottom;
    width: 100%;
    margin-right: -100%;
    margin-left: 10px;
    border-top: 1px solid black;
}

<h2>Featured products</h2>

answered Feb 13 '20 at 05:26

nourza

2,215
2
16
42

wow legend.. thanks@@@ – d5br5 Feb 13 '20 at 05:33

score 0 · Answer 2 · answered Feb 13 '20 at 05:26

You can easily achieve this with grid

.parent {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}

 .line{
    background:black;
    height:1px
}

<div class="parent">
  <div>My some text</div>
  <div  class="line"></div>
</div>

How can I fill blank space after word in sentence line with space line? at HTML, CSS

2 Answers2