Combine CSS selector with ::after selector

Question

I'm using a program in which users can change the color of the text. I want to change the color of my (custom) list-style based on the color of the text. I currently got the following code, but it doesn't work. I don't understand why. I hope someone can help.

li {
  list-style-type: none;
}

li::after {
  content '>';
}

li font[color="#dc1478"]~ ::after {
  color: #dc1478;
}

<ul>
  <li>
    <font color="#005392">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</font>
    <font color="#dc1478"> blablasls</font>
    ::after
  </li>
</ul>

When is use the selectors sepertly from each other they work, but combined they don't.

font[color="#dc1478"] and ::after

Answer 1

your problem:

li::after {
 content '>';
}

==>

li::after {
 content: '>';
 color: #dc1478;
}