Question

.b_btnWrapp .btn.btn_default:after {
  content: "\f054";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 15px;
  right: 30px;
}

.b_btnWrapp .btn.btn_default:after:hover {
  content: "\f054";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 15px;
  right: 18px;
}

<button class="b_btnWrapp btn btn_default">CLick</button>

我希望在CSS中使用after concept将箭头向右移动。代码正确吗？

Answer 1

您必须在样式选择器中删除退格键，因为它会被解释为“ .btn.btn_default是.b_btnWrapp的子级”。

只需使用此代码，它将起作用

.b_btnWrapp {
  position: relative;
  width: 100px;
  height: 30px;
}

.b_btnWrapp:after {
   font-family: "Font Awesome 5 Free";
   content: "\f061";
  font-weight: 900;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  transition: all .2s;
}

.b_btnWrapp:hover:after {
  right: 5px;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <button class="b_btnWrapp btn btn_default">CLick</button>
  </body>

</html>

还要注意，我稍微简化了您的代码（消除了选择器中不必要的复杂性并消除了重复的代码）。如果要在父级“坐标”中使用子级的position:relative位置，请不要忘记在父级上使用absolute。并注意顺序。 .element:hover:after与.element:after:hover

不同

Answer 2

尝试以您的风格添加

.b_btnWrapp.btn.btn_default:after {
      content: "\f054";
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      position: absolute;
      top: 15px;
      right: 30px;
      cursor:pointer;
    }

    .b_btnWrapp.btn.btn_default:after:hover {
      top: 15px;
      right: 18px;
    }

Answer 3

我使用javascript切换了箭头。希望对您有帮助！

var icon=document.querySelector("#btn i");

function toggleArrow(){
  var isLeftArrow=icon.classList.contains("fa-chevron-left");
  if(isLeftArrow){
    icon.classList.add("fa-chevron-right");
    icon.classList.remove("fa-chevron-left");
  }else{
    icon.classList.add("fa-chevron-left");
    icon.classList.remove("fa-chevron-right");
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/solid.css" integrity="sha384-r/k8YTFqmlOaqRkZuSiE9trsrDXkh07mRaoGBMoDcmA58OHILZPsk29i2BsFng1B" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/fontawesome.css" integrity="sha384-4aon80D8rXCGx9ayDt85LbyUHeMWd3UiBaWliBlJ53yzm9hqN21A+o1pqoyK04h+" crossorigin="anonymous">

<button id="btn" class="b_btnWrapp btn btn_default" onclick="toggleArrow()">
  Click 
  <i class="fas fa-chevron-left"></i>
</button>

单击按钮时，我想要下一个箭头

3 个答案: