Rectangle with 1 circle side - css

Question

.addcircle{
width:15%;
height:30px;
position:relative;
}
.addcircle:hover{
background: #1a1aff;
color:white;
}
.addcircle:hover a{
background: #1a1aff;
color:white;
}
.addcircle:after{
position: absolute;
z-index: 1;
left: 80%;
/* top: 0%; */
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
.addcircle:hover:after{background: #1a1aff;}
<div id="main">
HOOVER LINK BELOW
<div class="addcircle">
some page
</div>
<div class="addcircle" style="width:20%">
some page 2
</div>
</div>
How to do same effect like main(1st link) for responsive width??
As you can see on example, 1st hover look nice but 2nd one not rly... any clue?
Because when i check for bigger or smaller screen my circle move some where.

Answer 1

Not gonna do all the work for you but it looks like you're over thinking it. You're already messing with border-radius which is the key:
a {
color: white;
padding: 5px;
border-radius: 0 1rem 1rem 0 ;
background-color: blue;
}
Some Page
<br/>
<br/>
Some Page 2
Depending on the needs of your application (will all lines fit on one line on all expected viewports?), applying this style on hover could be all you need.

Answer 2

As you can see below, I've used right property on .addcircle:after instead of left and used a fixed value of negative half of the width which is -15px this will lead to a semi-circle effect and the right side of your links, without regarding width of the element.
.addcircle{
width:15%;
height:30px;
position:relative;
}
.addcircle:hover{
background: #1a1aff;
color:white;
}
.addcircle:hover a{
background: #1a1aff;
color:white;
}
.addcircle:after{
position: absolute;
z-index: -1;
right: -15px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
.addcircle:hover:after{
background: #1a1aff;
}
<div id="main">
HOOVER LINK BELOW
<div class="addcircle">
some page
</div>
<div class="addcircle" style="width:20%">
some page 2
</div>
</div>
However, there's no need to use a <div class="addcircle"> around your links. It's possible to implement exact same effect with only <a> elements.
a{
width:20%;
display: block;
height: 30px;
position:relative;
}
a:hover{
background: #1a1aff;
color:white;
}
a:after{
position: absolute;
z-index: -1;
right: -15px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}
a:hover:after{
background: #1a1aff;
}
<div id="main">
<span>HOOVER LINK BELOW</span>
some page
<a style="width: 50%" href="">some page 2</a>
</div>

Answer 3

Just add the display property to your .addcircle div:
.addcircle{
width:15%;
height:30px;
position:relative;
display: flex;
}
and for .addcircle:after change right position instead of left:
.addcircle:after{
position: absolute;
z-index: 1;
right: -12px;
width: 30px;
height: 30px;
margin-top: 0px;
border-radius: 50%;
content: "";
}