html - 如何用空格线填充句子行中单词后面的空格？在 HTML、CSS

Question

Question. sentence with half-line

在 HTML/CSS 中。

就像上传的图片一样，我想用线条填充一些单词后的空白。

单词的长度可以改变。

如果全宽为 1000px，单词长为 100px，则半行长为 900px。

单词的长度是 350px，那么半线的长度是 650px。

如何用CSS制作它？

请告诉我..

Answer 1

希望这有帮助: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>