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>和<h3>元素上使用CSS flexbox，以便您可以使用::after强制flex-grow: 1伪元素拉伸到剩余宽度。 / p>

由于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>

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

1 个答案: