在带有 CSS 的标题后画线

Question

如何在标题文字后画一条线，如下所示：

"TITLE ________"

在CSS?
“_”应该完成剩余的 div 并填充剩余的 space.

Answer 1

h1:after {
    content: "__________________";
}

进一步的解释和例子：:after pseudo class

Answer 2

h1 {
  position: relative;
}

h1:after {
  content: "";
  position: absolute;
  border-bottom: 1px solid red;
  width: 100%;
  bottom: 0;
}

<h1>Title Here</h1>

Answer 3

基于this answer：

h1{
  overflow:hidden;
}
h1:after{
  content:'';
  display:inline-block;
  width:100%; height:100%;
  margin-right:-100%;
  border-bottom:1px solid #000;
}

<h1>Title</h1>
<h1>Longer Title</h1>

在带有 CSS 的标题后画线

Draw line after a title with CSS

html

css

css-shapes