2016-12-20 2 views
0

내 wordpress 사이트에서 내 추가로드 버튼 옆에 아래쪽 화살표를 추가하고 싶습니다. 나는 화살이 거꾸로 된 화살처럼 보이길 원한다. 내로드 버튼은 플러그인 (https://wordpress.org/plugins/easy-load-more/installation/)을 통해 제어됩니다. 그래서 나는 그것에 대한 많은 통제권이 없다. enter image description here버튼 옆에 아래쪽 화살표 추가

의사 요소를 통해 아래쪽 화살표를 추가하려고했습니다. 그러나 그것은 작동하지 않았다. 보기 좋았지 만, 더 많은 버튼을 누르면 "v"가 사라지지 않았습니다.

.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 { 
 
\t display: none; 
 
} 
 

 
.elm-loading-anim { 
 
\t 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; 
 
}

를 (필자는 V는 표시하지 않음)을 클릭 한 후

enter image description here

(I 궁극적으로 보이게하는 방법입니다) 클릭하기 전에

enter image description here

아래쪽 화살표를 추가하는 방법에 대한 제안 사항이 있습니까? 미리 감사드립니다.

+2

캡쳐 한 플러그인 구성 페이지의 "버튼 텍스트"설정에 해당 문자를 복사 할 수 있습니까? 그래서 "Load More Posts v"가 될 것입니다. 그게 좋지 않다면,'.elm-button :: before'을'.elm-button : not (.is-loading) :: before'로 바꿀 수 있습니다. –

+1

고마워요! 나는 이것을 며칠 동안 파악하려고 노력해 왔습니다. .elm-button : 아니요 (.is-loading) :이 문제를 해결하기 전에. – user6738171

답변

-1

CSS 및 JavaScript로 관리 할 수 ​​있습니다. jQuery에서 addClass 및 removeClass 메소드를 사용하면 쉽게 수행 할 수 있습니다.

더 많은로드를 클릭 할 때 removeClass ('아래쪽 화살표')를 적용하십시오.

관련 문제