CODEWITHSUNDEEP
css
renakre
renakre

Reputation: 8291

arrow is not showing up using :after

I have been trying to add an arrow to the div with class .b, but is not working and I cannot figure out why. Does anyone has any idea?

#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>

Upvotes: 1

Views: 47

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105963

your selector is not correct and content:''; is missing to effectively generate your pseudo element, try this:

#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>

it is obviously not an arrow but a dot that shows because border is here ...

Upvotes: 1

Related Questions