On my wordpress site I want to add a down arrow next to my load more posts button. I want the arrow to look like an upside down arrow. My load more button is controlled through a plugin (https://wordpress.org/plugins/easy-load-more/installation/). So I don't have a lot of control over it.
I've tried adding in the down arrow through pseudo elements. However that did not work. It looked good, however when you pressed the load more button the "v" did not disappear.
.elm-button {
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease;
background-color: #ffffff;
text-shadow: none;
box-shadow: none;
border: none;
padding-top: 45px;
padding-bottom: 25px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-size: 19px;
color: #848484;
outline: none;
}
.elm-button.ajax-inactive {
display: none;
}
.elm-button.is-loading .elm-button-text {
display: none;
}
.elm-loading-anim {
display: none;
}
.elm-button.is-loading .elm-loading-anim {
display: block;
}
.elm-button.is-loading .elm-button-text {
display: none;
}
.elm-loading-icon {
width: 1.5em;
height: 1.5em;
}
.elm-button::before {
content: "v";
font-size:11px;
float: right;
margin: 6px 0 0 14px;
font-family: 'Days One', sans-serif;
}
.elm-button:active {
content:none;
visibility: hidden;
}
before click (which is how I ultimately want it to look)
after click (i don't want the v to appear)
Does anyone have any suggestions for how I could add the down arrow? Thanks in advance.