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.


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

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


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>


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

Thanks in advance.