How can i add custom css class to <ul> of AEM RTE component

In RTE Component of AEM - unordered list by default provides "." bullet list.

I need to provide an option to make list with checkmark bullets.

If we add some style (by configuring styles nodes) for list, then markup is generating as below.

<ul>

<li> <span class="abc">Line One</span> </li>

<li> <span class="abc">Line Two</span> </li>

</ul>

so whatever changes made( colored check mark or font) are applying to whole <li> content.

i am thinking to insert a class in ul so that i can control default "." bullets behavior with some other list type.

on applying of style to ul div my source should look like

<ul class="abc">

<li>Line One</li>

<li>Line Two</li>

</ul>

How can i achieve this in RTE. is any custom list plugin changes required? or can we achieve by properties?

Thanks in advance.