JSFiddle - React, Tailwind, and code Playground
HTML
<!-- On this link click, jQuery shoul trigger click on .toBeCliked but on it's right side -->
<a href="#">Click me</a>
<div class="container">
<div class="toBeClicked">Click the right side of me!</div>
</div>
CSS
.container {
position: relative;
width: 300px;
}
.toBeClicked {
display: block;
width: 300px;
height: 100px;
background: blue ;
line-height: 100px;
text-align: center;
}
.toBeClicked:after {
content: "CLICK THIS PART â—„";
width: 1px;
height: 100px;
background: red;
position: absolute;
line-height: 20px;
text-align: center;
right: 0px;
}