有没有更简单的方法可以在HTML中以粗体显示列表中的少数第一个字母？

Question

1953 - 穿过一种矮小，坚固的矮小小麦品种，带有高品质的美国品种，创造出一种能够很好地应对肥沃的菌株。它继续提供95％的墨西哥小麦。

1962年 - 访问德里并及时将其高产小麦品种带到印度次大陆，以帮助缓解由于人口迅速增长造成的大规模饥饿

1970 - 获得诺贝尔和平奖

1983 - 帮助七个非洲国家大幅提高其玉米和高粱产量

1984 - 成为得克萨斯A＆amp; M大学的杰出教授

与上面的例子一样，我想制作一个无序列表，每次我都应该将年份数字加粗。有没有什么方法可以一次做到这一点，而不是每次键入每一行时都使它们变粗？

Answer 1

关键的想法是在一个地方使用CSS来设置包裹年份一次的元素的样式，无论你有多少列表项。当然，每年仍然需要​​一些额外的标记。我将向您展示两个例子。

使用ol

您可以使用ol（有序列表，因为它似乎是按时间顺序排列的数据），其中的年份包含在span中，如下所示：

.chrono {
  list-style: none;
  padding: 0;
}

.chrono .year {
  font-weight: bold;
}

.chrono .year::after {
  content: " -";
}

<ol class="chrono">
  <li><span class="year">1953</span> crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertalizer. It goes on to provide 95% of Mexico's wheat.
  </li>
  <li><span class="year">1962</span> Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population
  </li>
  <li><span class="year">1970</span> receives the Nobel Peace Prize
  </li>
  <li><span class="year">1983</span> helps seven African countries dramatically increase their maize and sorghum yields
  </li>
  <li><span class="year">1984</span> becomes a distinguished professor at Texas A&M University
</ol>

提示：您可以通过删除每个span元素上的class="year"来减少标记。然后，您将通过CSS将其作为.chrono li span解决。

使用dl

或者，您可以使用dl（描述列表，描述给定年份的详细信息），可能是这样的：

.chrono {
  list-style: none;
  padding: 0;
}

.chrono dt {
  font-weight: bold;
  display: inline;
}

.chrono dd {
  display: inline;
  margin: 0;
}

.chrono dd::after {
  content: "\A";
  white-space: pre;
}

.chrono dt::after {
  content: " -";
}

<dl class="chrono">
  <dt>1953</dt>
  <dd>crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertalizer. It goes on to provide 95% of Mexico's wheat.</dd>
  <dt>1962</dt>
  <dd>Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population</dd>
  <dt>1970</dt>
  <dd>receives the Nobel Peace Prize</dd>
  <dt>1983</dt>
  <dd>helps seven African countries dramatically increase their maize and sorghum yields</dd>
  <dt>1984</dt>
  <dd>becomes a distinguished professor at Texas A&M University</dd>
</dl>

注意：在这里，我正在使用this technique来强制dt和dd元素的所需内联外观。

Answer 2

在CSS中不可能。它将使用JavaScript（例如爆炸功能）完成。最简单的是在HTML标记中标记一个单词......