0

1953 - 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.

1962 - 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

1970 - receives the Nobel Peace Prize

1983 - helps seven African countries dramatically increase their maize and sorghum yields

1984 - becomes a distinguished professor at Texas A&M University

Like the above example, I would like to make an unordered list, and each time I should make the year number bold. Is there any way that I can do this at one time instead of make them bold every time I type each line?

Linna Qiao
  • 11
  • Well, *how are you doing it* at the moment? Show us some HTML/CSS, otherwise we can't possibly tell if there is a *simpler* way. – domsson Jun 19 '17 at 10:29
  • Linna, you should select an accepted answer (given that one of them solved your problem). This way, the question will be marked as solved. – domsson Jul 04 '17 at 09:47

2 Answers2

2

The key idea is to use CSS to style the element wrapping the year once, in one place, no matter how many of those list items you have. It still requires some extra markup for each and every year, of course. I'll show you two examples.

Using ol

You could use a ol (ordered list, because it seems you have chronologically ordered data) with the years wrapped in spans, like this:

.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>

Hint: you can reduce the markup by removing the class="year" on each span element. You would then address them as .chrono li span via CSS.

Using dl

Alternatively, you could use a dl (description list, as you describe details regarding a given year), maybe like so:

.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>

Note: here, I'm using this technique to force the desired inline-appearance of the dt and dd elements.

domsson
  • 4,553
  • 2
  • 22
  • 40
0

It's not possible in CSS. It will be done using JavaScript (e.g. explode function). The simplest is to tag a word in HTML markup...

Tomas Musiol
  • 61
  • 4