JSFiddle - React, Tailwind, and code Playground

HTML

<head></head>
<body>
<div class="arrow-up">My div with centered triangle on top</div>

   <div id="toBeMoved" class="arrow-up">My div with centered triangle moved a lot with JQuery</div>
    
</body>

CSS

div{position:relative;display:block; clear:both; margin-top:20px; width:500px; height:50px; border:1px solid black}

 .arrow-up:after {
        content:"";
        position:absolute;
        top:-10px;
        left:50%;
        margin-left:-5px;
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;    
    border-bottom: 10px solid #333;
    }

JavaScript

var counter = 0;

$.fn.moveTheArrow = function() {

    $(this).removeClass('arrow-up');

    var modclass = 'arrow-up' + (counter++);
    $("<style type='text/css'> ." + modclass + ":after{left:10%;content:'';position:absolute;top:-10px;margin-left:-5px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #333}</style>").appendTo("head");
    $(this).addClass(modclass);

};




  $('#toBeMoved').moveTheArrow();