Is there a way to select with CSS a string up to a specific character?

Question

I want to be able to style my li list items when converted from markdown without having to tag them.

Specifically: I want to make bold the first part of a list item when it is formed like a key value pair.

The visual result should look like the equivalent of this:

<ul>
    <li><strong>key: </strong>value</li>
</ul>

So, is there a way to select the string inside the li item up to the colon?

How about showing the HTML you have now, although the real question is, why don't you just put the `strong` element in there? — Heretic Monkey, Oct 18 '19 at 14:11
if you have actually a list of key-values you could generate instead a description list with dt as the key and dd as the value — Fabrizio Calderan, Oct 18 '19 at 14:13
https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text and https://stackoverflow.com/questions/55612/css-to-select-style-first-word — Paulie_D, Oct 18 '19 at 14:15
@Heretic Monkey it's time consuming, I must add ``**text**`` all the time — Kostas Gogas, Oct 18 '19 at 14:57

score 0 · Answer 1 · answered Oct 27 '19 at 12:20

This isn't possible in CSS alone, but it is quite straightforward to deploy a snippet of javascript which surrounds the key: part of the text with a <span>:

<li><span class="key">key:</span> value</li>

which then enables you to style that part of the text.

Working Example:

const myList = document.getElementsByTagName('ul')[0];
const myListItems = myList.getElementsByTagName('li');

for (let i = 0; i < myListItems.length; i++) {

  let myListItemColonPosition = myListItems[i].textContent.indexOf(':')

  markup = '';
  markup += '<span class="my-key">';
  markup += myListItems[i].textContent.substring(0, myListItemColonPosition);
  markup += '</span>';
  markup += myListItems[i].textContent.substring(myListItemColonPosition);
  
  myListItems[i].innerHTML = markup;
  
}

li {
  font-size: 16px;
  line-height: 24px;
}

.my-key {
  font-weight: 700;
}

<ul>
<li>key0: value0</li>
<li>key1: value1</li>
<li>key2: value2</li>
<li>key3: value3</li>
<li>key4: value4</li>
</ul>

Is there a way to select with CSS a string up to a specific character?

1 Answers1