Есть ли способ выбрать с помощью CSS строку до определенного символа? - PullRequest
Новая
       25

Есть ли способ выбрать с помощью CSS строку до определенного символа?

0 голосов
/ 18 октября 2019

Я хочу иметь возможность стилизовать мои li элементы списка при преобразовании из уценки без необходимости их помечать.

В частности: я хочу выделить жирным шрифтом первую часть элемента списка при его формированиикак пара ключ-значение.

Визуальный результат должен выглядеть примерно так: 

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

Итак, есть ли способ выбрать строку внутри элемента li додвоеточие?

1 Ответ

0 голосов
/ 27 октября 2019

Это невозможно только в CSS, но довольно просто развернуть фрагмент javascript, который окружает часть текста key: с <span>:

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

, который затем позволяет стилизовать эту часть текста.

Рабочий пример: 

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