单击时隐藏伪元素

Question

在我的wordpress网站上，我在主页上有一个按钮，可以加载更多帖子。我想在“加载更多帖子”旁边添加一些颠倒的插入符号，所以我使用伪元素添加了一个“v”。我已经看到了我想要的样子，但是当我按下按钮时，按钮的其余部分v不会消失？我试过用:: active类修复它但它仍然出现。我该怎么办才能让它消失？

按钮示例

按钮点击后（我不希望v出现）

当前的css代码

.elm-button::before {
    content: "v"; 
    font-size:11px;
    float: right;
    margin: 6px 0 0 14px;
    font-family: 'Days One', sans-serif;
}
.elm-button::active {
display: none;
    visibility: hidden; 
}

Answer 1

您的代码段中有错误。 :active是伪类，而不是伪元素，因此它只有一个冒号 那么，这是怎么回事。

.elm-button {
  background:none; border:none; font:inherit;
 }
.elm-button::before {
    content: "v"; 
    font-size:11px;
    float: right;
    margin: 6px 0 0 14px;
    font-family: 'Days One', sans-serif;
}
.elm-button:active {
display: none;
    visibility: hidden; 
}

<button class="elm-button" type="button">Load more posts</button>

（另外，我认为你也需要.elm-button:focus，但问题描述中并不是很清楚。）

Answer 2

更新

我刚刚意识到给了相同的答案before。由于某种原因，它不能用于OP。这是W3Schools中的另一种方法，它为您提供了更大的自由来分别控制每个控件（css及其伪控件）。

var clickedToLoad = false;
$('.elm-button').on('mousedown',
    function(){
      document.documentElement.style.setProperty('--before-display', 'none');
    }
  )
$(document).on('mouseup',
    function() {
      document.documentElement.style.setProperty('--before-display', 'block');
    }
);

:root {
  --before-display: block;
}
.elm-button {
  display: var(--before-display);
}
.elm-button:before {
  content: "v";
  float: right;
  margin-left: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<BUTTON class="elm-button">LOAD MORE POSTS</BUTTON>

---

原始答案

要清楚，您不能使用JS或JQuery更改CSS伪元素。但是，还有其他选择。请参考上一个问题

但是，您的情况要容易得多，因为您只需更改代码中的错字（在active关键字之前添加双点）：

.elm-button::before {
  content: "v"; 
  font-size:11px;
  float: right;
  margin: 6px 0 0 14px;
  font-family: 'Days One', sans-serif;
}
.elm-button:active {
  display: none;
  visibility: hidden;
}

/* Added only to match your output*/

.elm-button {
  background: inherit;
  border: none;
}

<BUTTON class="elm-button">LOAD MORE POSTS</BUTTON>