JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown-submenu">
    <a href="#">Hello Kitty</a>
</div>
<br /><br />
<div id="test">Click here to change float</div>

CSS

.dropdown-submenu {
    position: absolute;
    width: 10%;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color:red;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu>a.changed:after {
    float: left;
}

.dropdown-submenu>a {
    margin-left: 10px;
}

JavaScript

$('#test').on('click', function() {
	$('.dropdown-submenu > a').addClass('changed');
});