css - 使用 :after 没有显示箭头

Question

我一直在尝试使用 .b 类向 div 添加箭头，但是没有用，我也不知道为什么。有人知道吗？

#nextgoal {
    width: 100%;
    text-align: center;
}

    #nextgoal .a {
        border: 1px solid #42aacc;
        height: 54px;
        width: 54px;
        border-radius: 50%;
        background-color: #fff;
        color: #42aacc;
        font-weight: bold;
        padding: 8px 10px 10px 12px;
        font-size: 30px;
        display: inline-block;
        position: relative;
        float: left;
        z-index: 1000;
    }

    #nextgoal .b {
        margin-left: -18px;
        margin-top: 6px;
        height: 49px;
        background-color: #42aacc;
        display: inline-block;
        padding: 10px 7px 3px 27px;
        color: white;
        position: relative;
        display: inline-block;
        float: left;
        z-index: 10;
    }

#nextgoal.b :after {
    background: #42aacc;
    bottom: 100%;
    color: #42aacc;
    display: block;
    padding: 2px;
    pointer-events: none;
    position: absolute;
    border: dotted 1px #42aacc;
    font-size: 11px;
    border-radius: 5px;
}

<div id="nextgoal" style="margin-top:1em;"><div class="a">AA</div><div class="b">Next Goal</div></div>

Answer 1

您的选择器不正确并且缺少 content:''; 以有效生成您的伪元素，试试这个:

#nextgoal .b:after {
  content: '';

#nextgoal {
  width: 100%;
  text-align: center;
}
#nextgoal .a {
  border: 1px solid #42aacc;
  height: 54px;
  width: 54px;
  border-radius: 50%;
  background-color: #fff;
  color: #42aacc;
  font-weight: bold;
  padding: 8px 10px 10px 12px;
  font-size: 30px;
  display: inline-block;
  position: relative;
  float: left;
  z-index: 1000;
}
#nextgoal .b {
  margin-left: -18px;
  margin-top: 6px;
  height: 49px;
  background-color: #42aacc;
  display: inline-block;
  padding: 10px 7px 3px 27px;
  color: white;
  position: relative;
  display: inline-block;
  float: left;
  z-index: 10;
  overflow: visible;
}
#nextgoal .b:after {
  content: '';
  background: #42aacc;
  bottom: 100%;
  color: #42aacc;
  display: block;
  padding: 2px;
  pointer-events: none;
  position: absolute;
  border: dotted 1px #42aacc;
  font-size: 11px;
  border-radius: 5px;
}

<div id="nextgoal" style="margin-top:1em;">
  <div class="a">AA</div>
  <div class="b">Next Goal</div>
</div>

它显然不是箭头而是显示的点，因为边框在这里......