Селектор :: before не поддерживается при применении к электронным письмам в формате HTML?

Question

Хорошо, поэтому это может быть глупый вопрос, но в настоящее время я не нахожу в Интернете никакого полезного материала, чтобы найти ответ на мою довольно простую, но раздражающую проблему.

У меня очень неприятная проблема, когда я пытаюсь оформить точку с маркером перед элементом списка в html-письме.

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

ul{list-style-type:square;} ul li{color:#000;} ul li::before{color:#fac600}

Я также пробовал следующее, но считаю, что :: before может не поддерживаться

  ul{list-style:none;}
  ul li::before {
  content: "\2022";
  color: #fac600;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
  }

Разочарованный в этой точке, я также попытался использовать изображение, чтобы заменить точку маркера, но это также не работает, так как я знаю, что это не поддерживается.

Я могу легко изменить маркер на квадрат и изменить цвет маркера + текст списка, но не отдельно.

Кто-нибудь имел эту проблему или знаете обходной путь?

Заинтересован в том, чтобы услышать мысли ваших парней и задаться вопросом, испытывали ли вы ту же проблему.Заранее спасибо.

Answer 1

:before не всегда поддерживается в электронной почте.Он работает с IOS, Apple, но не работает с Gmail или Outlook.

• https://www.campaignmonitor.com/css/selectors/before/

Answer 2

По умолчанию вы не можете изменить цвет li маркеров, независимо от того, разрабатываете ли вы электронную почту или нет. Однако вы можете использовать следующий фрагмент CSS, чтобы скрыть исходную точку маркера, а затем создать новую.

ul{
  list-style:none;
  }
  
ul li::before {
  content: "\2022";
  color: #fac600;
  display: inline-block; 
  width: 1em;
  margin-left: -1em;
  }

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>