2016-12-20 25 views
0

私のWordPressのサイトで私は私のロードの横の下矢印を追加したい投稿ボタン。私は、矢印が逆さまの矢のように見えるようにしたい。 My load moreボタンはプラグイン(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; 
 
}

(私は最終的にはそれが見てみたい方法です)クリックする前

enter image description here

(私はvが表示されないようにする)

enter image description here

誰かが下向き矢印を追加する方法について提案はありますか?前もって感謝します。

+2

あなたはスクリーンショットを作成したプラグイン設定ページの「ボタンテキスト」設定にその文字をコピーできますか?だから、 "More Posts vをロードする"でしょう。それがうまく見えない場合は、 '.elm-button :: before'を' .elm-button:not(.is-loading):: before'に変更することができます –

+1

十分にありがとうございます!私は数日間このことを理解しようとしてきました。 .elm-button:not(.is-loading)::問題を解決する前に。 – user6738171

答えて

-1

CSSとJavaScriptで管理できます。 jQueryでaddClassメソッドとremoveClassメソッドを使用すると、簡単に実行できます。

さらにクリックすると、removeClass( '下矢印')が適用されます。

関連する問題