css - 有 1 个圆边的矩形

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">
    <a href="">some page</a>
    </div>
    <div class="addcircle" style="width:20%">
    <a href="">some page 2</a>
    </div>
    </div>

如何实现与 main(1st link) 响应宽度相同的效果？？

正如您在示例中看到的那样，第一个悬停看起来不错，但第二个悬停不正常……有什么线索吗？

因为当我检查更大或更小的屏幕时，我的圆圈会移动到某个地方。

Answer 1

不会为您完成所有工作，但看起来您想多了。你已经弄乱了 border-radius 这是关键:

a {
  color: white;
  padding: 5px;
  border-radius: 0 1rem 1rem 0 ;
  background-color: blue;
}

<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Some Page</a>
<br/>
<br/>
<a href="https://www.youtube.com/watch?v=32FB-gYr49Y">Some Page 2</a>

根据您的应用程序的需要(所有行是否适合所有预期视口(viewport)上的一行？)，在悬停时应用此样式可能就是您所需要的。