Conceal the pseudo element when clicked

Question

Conceal the pseudo element when clicked

Running a WordPress site, I have a button on the home page that is set to load more posts when clicked. I wanted to add a touch of design by including an upside-down caret next to the text "load more posts" using pseudo-elements. While I successfully achieved the desired look, I encountered an issue - the caret does not disappear along with the rest of the button when it's pressed. I attempted to address this problem by applying an ::active class, but the caret still persists. What steps should I take to ensure the caret disappears upon clicking the button?

Here is an example of the button:

https://i.sstatic.net/OI2y3.png

This is how the button looks after being clicked (I don't want the caret to be visible):

https://i.sstatic.net/Zfu5l.png

Below is the current CSS code:

.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; 
}

css wordpress onclick pseudo-element pseudo-class

Answer 1

Answer №1

It seems like there is a mistake in your code snippet. The pseudo-class :active should only have one colon because it is a pseudo-class, not a pseudo-element.
What do you think about this updated version?

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

(By the way, you might also want to consider adding .elm-button:focus, but that depends on the specific requirements.)

Answer 2

It seems like there is a mistake in your code snippet. The pseudo-class :active should only have one colon because it is a pseudo-class, not a pseudo-element.
What do you think about this updated version?

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

(By the way, you might also want to consider adding .elm-button:focus, but that depends on the specific requirements.)

Answer 3

Answer №2

NEW UPDATE

Upon further investigation, I discovered that a similar solution was provided earlier. Despite this, it seems the initial suggestion did not work for the user (OP). Here is an alternative approach sourced from W3Schools, which offers greater flexibility in controlling each element separately using CSS variables and pseudo-elements.

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>

REVISED ORIGINAL SOLUTION

Just to clarify, altering CSS pseudo-elements via JavaScript or JQuery is not feasible. Nonetheless, there are alternative solutions available. Please refer back to the previous query provided for more insights.

However, correcting your issue should be relatively simple by fixing a typo in your existing code (introduced double dots before the active keyword):

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

Answer 4

NEW UPDATE

Upon further investigation, I discovered that a similar solution was provided earlier. Despite this, it seems the initial suggestion did not work for the user (OP). Here is an alternative approach sourced from W3Schools, which offers greater flexibility in controlling each element separately using CSS variables and pseudo-elements.

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>

REVISED ORIGINAL SOLUTION

Just to clarify, altering CSS pseudo-elements via JavaScript or JQuery is not feasible. Nonetheless, there are alternative solutions available. Please refer back to the previous query provided for more insights.

However, correcting your issue should be relatively simple by fixing a typo in your existing code (introduced double dots before the active keyword):

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

Conceal the pseudo element when clicked

Answer №1

Answer №2

NEW UPDATE

REVISED ORIGINAL SOLUTION

Similar questions

Evaluate One Input Value to Determine Another Input Value

Positives and negatives images for accordion menu

Mozilla Firefox does not have the capability to support preloading

The callback function in WordPress is executed twice

Design a dynamic table using JavaScript

Safari not updating Angular ng-style properly

Preventing ReactJS tooltips from exceeding the boundaries of the screen

The viewport scaling issue occurs when transitioning from landscape to portrait orientation

The functionality of my website is not optimized for viewing on iPhones

What is the best way to add color to a Table Header?

Adsense ad unit is not responsive and fails to display properly at dimensions of 320x50 px

Changing the styling frameworks for Components

Expanding beyond the dimensions of the webpage, HTML CSS Height set to 100% creates a unique

Using jQuery to update the input value when the mouse hovers over a div

How can I use ontouchstart and ontouchend events in jQuery?

The enigma of CSS: How is the width mysteriously set to 0px with no visible CSS styling

How to Align Navigation Bar Items to the Right in Bootstrap 4

What's the best way to display two checkboxes on a single line?

How to use JQuery to retrieve multiple background image URLs from CSS styling

Styling CSS variables uniquely