css - 相对 CSS 仅语音气泡

Question

我正在使用这段代码生成一个纯 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 元素时三 Angular 形会离开，因为它有一个固定的位置，我该如何移动三 Angular 形呢？

这是我的 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>

Answer 1

不是对箭头使用 position:absolute，而是需要将其更改为 relative 位置，以便箭头相对于 定位自身。selected 菜单项。

参见 demo here .

注意:将 :hover 选择器替换为 .selected 类。