改行があるにもかかわらず、最初の行に矢印を表示

Question

基本的には、矢印が最初の行に表示されるように、次のようにしてください。

しかし、私がしたコードから、矢印は、テキストボックスの幅よりも長い場合、テキストは第二列になり、次の。

私のコードを変更する方法はわかりませんが、あなたの中には私にいくつかのアドバイスを提供できることを願っています。ありがとう！

矢印がどのようにアニメーション化されているかに注意してください。ありがとう！ここで

ul { list-style-type: none; margin:0; padding: 0; } 
 
.EScontent-training { position: relative; width: 302px; height: 320px; margin: 0 17px; opacity: 0.9;} 
 
.tracol{ background: rgba(220, 206, 185, 1);} 
 
.EScontent{padding: 27px 22px;} 
 
.EScontent ul{padding: 45px 0;} 
 
.EScontent ul li{padding: 8px 0;} 
 
.tracol .EScontent ul li a{color:#fff; text-decoration: none; padding-right: 25px; background: url('https://image.ibb.co/gXg3ea/arrow_training.png') no-repeat top 50% right 0;} 
 
.tracol .EScontent ul li a:hover{color:#5f5d5d; text-decoration: none; padding-right: 38px; background: url('https://image.ibb.co/j59Oea/arrow_training_hover.png') no-repeat top 50% right 0;}

<div class="EScontent-training"> 
 
\t <div class="color-overlay tracol"> 
 
    <div class="EScontent"> 
 
     <div class="title text_grey2_24_bold_uppercase">Lorem ipsum dolor sit amet</div> 
 
     <ul> 
 
     <li><a href="">Sed consectetur dolor et elit Accreditation</a></li> 
 
     <li><a href="">Duis aliquet dui eget dui suscipit</a></li> 
 
     <li><a href="">Vivamus pharetra mi a sem condimentum</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

メイク李項目の疑似要素の使用、あなたのCSSを更新

CSSこのことができます

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
.EScontent-training { 
    position: relative; 
    width: 302px; 
    height: 320px; 
    margin: 0 17px; 
    opacity: 0.9; 
} 
.tracol { 
    background: rgba(220, 206, 185, 1); 
} 
.EScontent { 
    padding: 27px 22px; 
} 
.EScontent ul { 
    padding: 45px 0; 
} 
.EScontent ul li { 
    padding: 8px 0; 
    position: relative; 
    display:inline-block; 
} 

.tracol .EScontent ul li::after{ 
    content:""; 
    background: url('https://image.ibb.co/gXg3ea/arrow_training.png') no-repeat top 50% right 0; 
    position: absolute; 
    top:6px; 
    right:0; 
    height:25px; 
    width:25px; 
} 
.tracol .EScontent ul li:hover::after { 
    color: #5f5d5d; 
    text-decoration: none; 
    padding-right: 38px; 
    background: url('https://image.ibb.co/j59Oea/arrow_training_hover.png') 
    no-repeat 
    top 
    50% 
    right 
    0; 
} 

.tracol .EScontent ul li a { 
    color: #fff; 
    text-decoration: none; 
    padding-right: 25px; 
    position: relative; 
} 

希望..

Answer 2

は別ですアプローチ

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

.EScontent-training { 
    position: relative; 
    width: 302px; 
    height: 320px; 
    margin: 0 17px; 
    opacity: 0.9; 
} 

.tracol { 
    background: rgba(220, 206, 185, 1); 
} 

.EScontent { 
    padding: 27px 22px; 
} 

.EScontent ul { 
    padding: 45px 0; 
} 

.EScontent ul li { 
    padding: 8px 0; 
    display: flex; 

} 

.tracol .EScontent ul li a { 
    color: #fff; 
    text-decoration: none; 
} 

.tracol .EScontent ul li span { 
    background: url('https://image.ibb.co/gXg3ea/arrow_training.png') no-repeat top 50% right 0; 
    display: block; 
    width: 20px; 
    height: 20px; 
    margin-left: 5px; 
} 

.tracol .EScontent ul li:hover span { 
    /*background: url('https://image.ibb.co/j59Oea/arrow_training_hover.png') no-repeat top 30% right 0;*/ 
    background: url('https://image.ibb.co/j59Oea/arrow_training_hover.png') no-repeat top 50% right 0; 
    display: block; 
    min-width: 20px; 
    min-height: 20px; 
} 

.tracol .EScontent ul li a:hover { 
    color: #5f5d5d; 
    text-decoration: none; 
} 

https://jsfiddle.net/cohd4qqb/