CODEWITHSUNDEEP
htmlcsspseudo-element
Unity Hour
Unity Hour

Reputation: 570

Pseudo-element moves when changes in parent position

I have an animated button which has an text below it, and it was made with an :after selector. That button shifts 2px downward when it is active(clicked) and box-shadow gets removed hence giving the click effect. But this is also changing the position of element created with :after selector. How can I make the text to be always still?

.start {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #444444;
  margin-left: 20px;
  margin-top: 8px;
  background-color: #FC0102;
  box-shadow: 0px 2px 5px black;
  position: relative;
}

.start:active {
  box-shadow: 0px 0px 5px black;
  top: 2px;
}

.start:after {
  content: "Start";
  position: absolute;
  top: 25px;
  font-size: 13px;
  left: -4px;
}
<div class="start"></div>

Upvotes: 2

Views: 1059

Answers (1)

Stickers
Stickers

Reputation: 78686

Add the same amount of offset to the pseudo text on :active:

.start:active:after {
  margin-top: -2px;
}

Snippet:

.start {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid #444444;
  margin-left: 20px;
  margin-top: 8px;
  background-color: #FC0102;
  box-shadow: 0px 2px 5px black;
  position: relative;
}

.start:active {
  box-shadow: 0px 0px 5px black;
  top: 2px;
}

.start:after {
  content: "Start";
  position: absolute;
  top: 25px;
  font-size: 13px;
  left: -4px;
}

.start:active:after {
  margin-top: -2px;
}
<div class="start"></div>

Upvotes: 2

Related Questions