animate ::before content on :hover

user_11908747 0
Viewed 62

The following css is to have the $ sign appear on either side of the Click text within <label></label>. However, I'd also like to make the $ content move left and right respectively on hover using only css. I'm not entirely sure how I can accomplish that since the $ is a pseudo element

#foo:hover ~ label {
  cursor: pointer;
  background-color: #e0e0e0;
  background-image: linear-gradient(180deg, #e0e0e0 0%, #B7B7B7 50%, #B7B7B7 100%);
}

label::before, label::after {
   content: "$";
}
<div class="button">
  <input id="foo" type="checkbox" />
  <label for="foo">Click</label>
</div>

css-animations css html
2 Answers

Set the pseudos to position absolute, and z-index -1 to be behind the label.

on hover, move them

#foo:hover ~ label {
  cursor: pointer;
  background-color: #e0e0e0;
  background-image: linear-gradient(180deg, #e0e0e0 0%, #B7B7B7 50%, #B7B7B7 100%);
}


label {
  background-color: white;
  margin: 0 1em;
  position: relative;
}
label::before, label::after {
   content: "$";
   position: absolute;
   z-index: -1;
}

label::before {
   right: calc(100% - 10px);
   transition: right 1s;
}
label:hover::before {
    right: 100%;
}
label::after {
   left: calc(100% - 10px);
   transition: left 1s;
}
label:hover::after {
    left: 100%;
}
<div class="button">
  <input id="foo" type="checkbox" />
  <label for="foo">Click</label>
</div>

user_19263690

use the transition property 

#foo:hover ~ label {
  cursor: pointer;
  background-color: #e0e0e0;
  background-image: linear-gradient(180deg, #e0e0e0 0%, #B7B7B7 50%, #B7B7B7 100%);
  position: relative;
}

label::before, label::after {
  content: "$";
  position: relative; 
  left: 0px;
  transition: all 250ms ease;
}

#foo:hover ~ label::before,
label:hover::before{
  left: -10px;
}

#foo:hover ~ label::after,
label:hover::after{
  left: 10px;
}
<div class="button">
  <input id="foo" type="checkbox" />
  <label for="foo">Click</label>
</div>

user_105645250
Related