时间戳

首页 > 解决方案 > 如何用空格线填充句子行中单词后的空格？在 HTML、CSS

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

问题描述

问题。带半行的句子

在 HTML/CSS 中。

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

单词的长度可以改变。

如果全宽是 1000px，字长是 100px，那么半行就是 900px 长。

而字是350px，那么半行就是650px-long。

我怎样才能通过 CSS 制作它？

请告诉我..

标签： htmlcss

解决方案

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

推荐阅读