相对仅css语音气泡

我正在使用此代码生成仅css的语音气泡：-

li.selected{
            background-color: blue;
            a{
                color: white;
            }

        }

        li.selected:after{

            content: "";
            position: absolute;
            top: 33%;
            left: 390px;
            border-top: 10px solid transparent;
            // border-top-color: inherit; 
            border-left: 10px solid blue;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;

        }

虽然这样做很好，但当我移动到下一个li项目时，三角形会向左移动，因为它有一个固定的位置，如何移动三角形

以下是我的html代码：-

<ul>

              <li class='selected'>
                <a href="/users/credits">Credits</a>
              </li>
              <div class='line-separator'></div>
              <li>
                <a href="/users/edit">Change Password</a>
              </li>
              <div class='line-separator'></div>
              <li>
                <a href="#">Investor Status</a>
              </li>
            </ul>

您有这个有用的css

/*带等高线三角形的气泡 ------------------------------------------*/

.triangle-isosceles {
   position:relative;
   padding:15px;
   margin:1em 0 3em;
   color:#000;
   background:#f3961c;

   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, #f9d835, #f3961c);
   background:linear-gradient(top, #f9d835, #f3961c);
}

/* creates triangle */
.triangle-isosceles:after {
   content:"";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   bottom:-15px;
   left:50px;
   width:0;
   border-width:15px 15px 0;
   border-style:solid;
   border-color:#f3961c transparent;
}

---

您需要将其更改为

相对
位置，以使箭头相对于所选
菜单项定位，而不是对箭头使用
position:absolute

看

注意：将
：hover
选择器替换为
.selected
类。
我用一个三角形指针显示所选链接，因此我认为任何固定位置的链接都不起作用。您使用的是CSS预处理器，您能列出哪一个吗？CSS预处理器比我想象的要少，您是否也可以发布您的HTML并澄清问题的具体原因？：）我无法添加图像，否则它会更好地说明我的问题。请粘贴一个链接，+rep用户将为您编辑它