To specifically target only the text content without using a <span> or another method to identify the desired styling, you can utilize the ::first-line pseudo-selector as an approximation. This approach is effective when dealing with list items that do not extend over multiple lines.
Instead of assigning individual classes to each list item, you can apply a class to the entire list and then style it accordingly. In this case, I have assigned the class class="subjects" to the <ol>.
Eliminating the unnecessary <br> line breaks, it is recommended to use the CSS property margin for creating space between elements. This adjustment can be made within the rule defined for .subjects li.
The key to achieving the desired gold-on-gray aesthetic is targeting the first line of all list items within the .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>