WordPress: Wrap li content with a span

Question

I've added styles to a ul tag so that the bullet points will be a different color. The problem with this is that it also changes to color of the li content whereas I only intend it to change the bullet point color.

I've tried using pseudo styling but it did not work out well.

Since I am using WordPress the li will be within the content editor and therefore would be ideal if all content within the li tags are wrapped in a span so that I can filter out the styling of the li from the content within it.

I know this could be possible with preg_replace but I'm still new to PhP in general.

Here is an example of what I am trying to achieve:

<ul>
 <li>
  // Wordpress Add <span> Here
    Content Goes Here
  // Wordpress Add </span> Here
 </li>
</ul>

Ultimately is it possible to automatically wrap content within a li with the use of a back-end function and filter rather than having the user manually add it within the WordPress content editor?

I hope this has made sense to you, I tried my best.

CSS as requested

ul {
 color: #2e6c9e;
 padding-left: 22px;
}

ul li {
 color: #636466; // This does not work :(
}

NOTE:

I need an alternative to :before and :after

For those who are not clear, I'm adding the ul element through WordPress content editor. Since this will need to be user friendly I need a method to slip in a span before the li content so that users with no technical knowledge can insert ul's without the color conflict.

Answer 1

I don't think you can color the bullet in a <li>. So you have to make your own bullet and you can easily do that with CSS.

Here is one sample that I usually use:

li {
    position: relative;
    list-style: none;
}
li:before {
    position: absolute;
        top: -3px;
        left: -18px;
    content: "• ";
    font-size: 1.2em;
    color: #222;
}

Answer 2

Try this HTML:

<ul>
   <li>
     <span>
        test
     </span>
   </li>
</ul>

With this CSS:

ul  {
        color: red;
        padding-left: 22px;
    }
ul span
    {
        color: green; 
    }

It works for me. If it doesn't work then there might be other CSS thats being applied to your code in which case add !important to your styles. Styling classes rather than elements would also improve your code.