How to add background color to a text?

Question

Is there a better way to write this code without using the span tag I want to add background color to my text

Code:

.subject {
  color: gold;
  background: gray;
}

<h2>Some Subjects</h2>
<ol>
  <li><span class="subject"> Physics</span> </li>

  <br>
  <li><span class="subject"> Astronomy</span></li>

  <br>
  <li><span class="subject">Mathematics<span></li>
            </ol>

I have used an external link for CSS

I tried that but doesn't do anything. i want to add background color to the text without the span txt. — Mekail Kamran, Feb 26 '21 at 18:47
See the comment on the question that someone linked as a duplicate, you can _approximate_ the effect using `::first-line` — as long as your `li`s don't span multiple lines this would work. I would add an answer if you can get others to vote to re-open. — Stephen P, Feb 26 '21 at 18:58

score 1 · Answer 1 · answered Feb 27 '21 at 00:12

You can't affect just the :text without using a <span> or some other way to mark the text you want to style, but you can approximate it by using the ::first-line pseudo-selector. This would work for cases where your list items don't span multiple lines.

You also don't need to put a class on every list item; you can put a class on the list itself and use that to target the styling. I added class="subjects" to the <ol> for that.

I also removed the <br> line breaks; you can and should use margin to create space in-between elements. This is done with the .subjects li rule.

The main rule to get the gold-on-gray style you want is by targeting the "first-line" in all list items within a .subjects ordered (or unordered) list, using the selector .subjects li::first-line

.subjects li {
  margin-bottom: 0.8em;
}
.subjects li::first-line {
  color: gold;
  background: gray;
}

<h2>Some Subjects</h2>
<ol class="subjects">
  <li>Physics</li>
  <li>Astronomy</li>
  <li>Mathematics</li>
</ol>

ikiK · Accepted Answer · 2021-02-26T19:07:46.247

Use width: max-content; on li to wrap background around text only

Use li to set initial color of numbers to black (or something else) only and then use li::first-line to set your deserted effect on text.

Read about it more here: Change bullets color of an HTML list without using span

li  {
color: black
}


li::first-line {
  color: gold;
  background-color: gray;
  width: max-content;
}

<h2>Some Subjects</h2>
<ol>
  <li><span class="subject"> Physics</span> </li>

  <br>
  <li><span class="subject"> Astronomy</span></li>

  <br>
  <li><span class="subject">Mathematics</span></li>
</ol>

score -1 · Answer 3 · answered Feb 26 '21 at 18:49

-1

Put it on the li

li {
  color: gold;
  background: gray;
}

<h2>Some Subjects</h2>
<ol>
  <li>Physics</li>

  <br>
  <li>Astronomy</li>

  <br>
  <li>Mathematics</li>
</ol>

answered Feb 26 '21 at 18:49

petres

582
2
19

That's exactly what I was thinking, but it _**is**_ different — the numbering becomes gold (instead of black) and the background extends to the whole width of the `li` – Stephen P Feb 26 '21 at 18:50

How to add background color to a text?

3 Answers3