html - 在标题之后，将点设置到页面边缘

Question

我目前正在尝试在标题 (h1/h2/h3) 之后插入点，直到页边距。问题是标题各不相同，我不知道如何设置点。例如，用点填充 H1 + 95%。

到目前为止我只能创建一个自动编号，但标题后没有点

h2:before {
  content: counter(H2) " ";
  counter-increment: H2;
}

h2 {
  counter-reset: H3;
  font-size: 13pt;
}

h3:before {
  content: counter(H2) "." counter(H3) " ";
  counter-increment: H3;
}

h3 {
  counter-reset: H4;
  font-size: 11pt;
}

<!-- HTML -->
<h2> ABC </h2>
<h2> ABCD </h2>
<h3> ANNCD </h3>

Answer 1

你想要的可以通过使用::after来实现伪元素。你会想在你的 <h2> 上使用 CSS flexbox和 <h3>元素，这样你就可以强制 ::after使用 flex-grow: 1 拉伸(stretch)到剩余宽度的伪元素.

由于 CSS 没有一遍又一遍地重复一个字形的功能，一个非常愚蠢的解决方法就是尝试使用线性渐变来模仿句点:

h2::before {
  content: counter(H2) " ";
  counter-increment: H2;
  
  /* Arbitrary margin to mimic whitespace */
  margin-right: 0.25em;
}

h2 {
  counter-reset: H3;
  font-size: 13pt;
}

h3::before {
  content: counter(H2) "." counter(H3) " ";
  counter-increment: H3;
  
  /* Arbitrary margin to mimic whitespace */
  margin-right: 0.25em;
}

h3 {
  counter-reset: H4;
  font-size: 11pt;
}

/* Use display flex */
h2, h3 {
  display: flex;
}

/* Use ::after to fill up remaining space */
h2::after, h3::after {
    content: '';
    flex-grow: 1;
    background-image: linear-gradient(90deg, black .125em, white .125em);
    background-size: .25em .125em;
    background-repeat: repeat-x;
    background-position: bottom left;
    position: relative;
    bottom: .25em;
    margin-left: .25em;
}

<h2>ABC</h2>
<h2>ABCD</h2>
<h3>ANNCD</h3>

另一种选择实际上是使用仅包含 . 的 SVG 元素字形本身，即:

<svg fill="black" width="5" height="10" viewBox="0 0 5 10"  xmlns="http://www.w3.org/2000/svg"><text x="0" y="0" dy="10">.</text></svg>

然后，您只需 use this SVG as part of the data URI of the background image ，并使用与上面相同的布局策略:

h2::before {
  content: counter(H2) " ";
  counter-increment: H2;
  
  /* Arbitrary margin to mimic whitespace */
  margin-right: 0.25em;
}

h2 {
  counter-reset: H3;
  font-size: 13pt;
}

h3::before {
  content: counter(H2) "." counter(H3) " ";
  counter-increment: H3;
  
  /* Arbitrary margin to mimic whitespace */
  margin-right: 0.25em;
}

h3 {
  counter-reset: H4;
  font-size: 11pt;
}

/* Use display flex */
h2, h3 {
  display: flex;
}

/* Use ::after to fill up remaining space */
h2::after, h3::after {
    content: '';
    flex-grow: 1;
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" width="5" height="10" viewBox="0 0 5 10"  xmlns="http://www.w3.org/2000/svg"><text x="0" y="0" dy="10">.</text></svg>');
    background-repeat: repeat-x;
    background-position: bottom left;
    position: relative;
    bottom: .25em;
    margin-left: .25em;
}

<h2>ABC</h2>
<h2>ABCD</h2>
<h3>ANNCD</h3>