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

对li项使用伪元素，更新你的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/

即使有换行符

2 个答案: