"text-shadow" не работает с "columns" на ::marker нумерованого списка

Question

В целом, вся суть в самом вопросе. Получается так, что когда я на маркер делаю тень, а в блоке, в который этот список обернут, ставлю columns, то тень просто не подключается. Лучше чем объяснять, я приведу пример.

Блок, в котором есть свойство columns:

под классом one - белый цвет и оранжевая тень (цвет есть, тени нет)

под классом two - черный цвет и оранжевая тень(цвет есть, тени нет).

Блок в котором нет этого свойства:

под классом three - белый цвет и оранжевая тень (цвет есть, тень есть)

Как можно решить эту проблему? Изменение html не подходит, так как текст приходит из WP со своей разметкой

li {
    cursor: pointer;
    text-decoration: none;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 150%;
    color: #131313; 
}
.one::marker {
    color: #fff;
    font-weight: 600;
    font-size: 40px;
    text-shadow: #FA5C45 1px 0 0px, #FA5C45 0 1px 0px, #FA5C45 -1px 0 0px, #FA5C45 0 -1px 0px;
}

.two::marker {
    font-weight: 600;
    font-size: 40px;
    text-shadow: #FA5C45 1px 0 0px, #FA5C45 0 1px 0px, #FA5C45 -1px 0 0px, #FA5C45 0 -1px 0px;
}

.three::marker {
    color: #fff;
    font-weight: 600;
    font-size: 40px;
    text-shadow: #FA5C45 1px 0 0px, #FA5C45 0 1px 0px, #FA5C45 -1px 0 0px, #FA5C45 0 -1px 0px;
}

.block {
  margin-left: 20px;
      columns: 2;
    column-gap:4em;
    break-inside: avoid;
}

<div class="block">
    <ol>
        <li class="one">текст</li>
        <li class="one">текст</li>
        <li class="one">текст</li>
        <li class="one">текст</li>
        <li class="two">текст</li>
        <li class="two">текст</li>
        <li class="two">текст</li>
        <li class="two">текст</li>
    </ol>
</div>
    <ol>
        <li class="three">текст</li>
        <li class="three">текст</li>
        <li class="three">текст</li>
        <li class="three">текст</li>
    </ol>

Answer 1

Можно цифры нумерованного списка подменить псевдоэлементами и уже их стилизовать так, как Вам надо. В моём примере я добавил только сами цифры с помощью :before - если обязательно нужны точки после цифр, то их можно создать дополнительно с помощью :after (и лишний div здесь не нужен - класс .block можно задать самому списку)

li {
    cursor: pointer;
    text-decoration: none;
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 150%;
    color: #131313; 
}
.block {
    margin-left: 20px;
    columns: 2;
    column-gap: 4em;
    break-inside: avoid;
    counter-reset: myCounter;
}
.block li {
    list-style: none;
}
.block li:before {
    position: relative;
    left: -10px;
    counter-increment: myCounter;
    content: counter(myCounter);
    font-weight: 600;
    font-size: 40px;
    text-shadow: #FA5C45 1px 0 0px, #FA5C45 0 1px 0px, #FA5C45 -1px 0 0px, #FA5C45 0 -1px 0px;
}
.block li.one:before {
    color: #fff;
}
.three::marker {
    color: #fff;
    font-weight: 600;
    font-size: 40px;
    text-shadow: #FA5C45 1px 0 0px, #FA5C45 0 1px 0px, #FA5C45 -1px 0 0px, #FA5C45 0 -1px 0px;
}

<ol class="block">
  <li class="one">текст</li>
  <li class="one">текст</li>
  <li class="one">текст</li>
  <li class="one">текст</li>
  <li class="two">текст</li>
  <li class="two">текст</li>
  <li class="two">текст</li>
  <li class="two">текст</li>
</ol>

<ol>
  <li class="three">текст</li>
  <li class="three">текст</li>
  <li class="three">текст</li>
  <li class="three">текст</li>
</ol>

БЛОГ НА HUSL

"text-shadow" не работает с "columns" на ::marker нумерованого списка

Ответы (1 шт):