Как сделать так, что при наведении стрелка смещалась вправо?

Question

[Norum]

Как сделать так, что правая стрелка навигации при наведении не удлинялась влево и не отталкивала левую стрелку, а удлинялась вправо до конца блока и почему стрелка не меняет цвет при наведении? Увеличение ширины осуществляется через псевдо-элемент.

Сам сайт cn39614.tmweb.ru
Весь код jsfiddle.net/rznq8je9/

Как у меня



Как надо

<section class="spaces">
        <div class="wrapper">
            <div class="content">
                <div class="spaces-title">
                    <h3>Our Spaces</h3>
                    <p>Our space is designed to give you a different experience when working with your team or personally</p>
                    <div class="plug"></div>
                </div>
                <div class="spaces-gal owl-carousel">
                    <div class="spaces-slide one">
                        <h4>Private Space</h4>
                        <p>Comfortable space, Full speed wifi, Free coffe & Snack<br>and many more</p>
                        <div class="details">
                            <span>Check avaibility</span><i class='fas fa-chevron-right'></i>
                        </div>
                    </div>
                    <div class="spaces-slide two">
                        <img src="img/space-2.jpg" alt="2">
                        <span>Custom Office</span>
                        <div class="details">
                            <span>Check avaibility</span><i class='fas fa-chevron-right'></i>
                        </div>
                    </div>
                    <div class="spaces-slide three">
                        <img src="img/space-3.jpg" alt="3">
                        <div class="details">
                            <span>Check avaibility</span><i class='fas fa-chevron-right'></i>
                        </div>
                        <span>Problem solving</span>
                    </div>
                    <div class="spaces-slide four">
                        <img src="img/space-4.jpg" alt="4">
                        <div class="details">
                            <span>Check avaibility</span><i class='fas fa-chevron-right'></i>
                        </div>
                        <span>Working with team</span>
                    </div>
                </div>
                <div class="spaces-slide-counter"></div>
            </div>
        </div>
    </section>

.spaces-gal .owl-prev i,
.spaces-gal .owl-next i {
  color: #9a9a9a;
  transition: 0.3s;
}
.spaces-gal .owl-prev:after {
  content: '';
  display: inline-block;
  border-bottom: 6px solid #9a9a9a;
  width: 0;
  vertical-align: middle;
  margin-top: -10px;
  margin-left: -1px;
  transition: 0.3s all;
}
.spaces-gal .owl-prev:hover:after {
  width: 50px;
  color: #ff5722;
}
.spaces-gal .owl-next:before {
  content: '';
  display: inline-block !important;
  border-bottom: 6px solid #9a9a9a;
  width: 0;
  vertical-align: middle;
  margin-top: -10px;
  margin-right: -20px;
  transition: 0.3s all;
  margin-left: 30px;
}
.spaces-gal .owl-next:hover:before {
  width: 50px;
  color: #ff5722;
}

Comments

[Максим]

Последний вопрос посмотри свой, там ответ

Answer 1

[Aricus]

Стрелка не удлиняется вправо из-за позиционирования родительского элемента:

.spaces-gal .owl-nav {
    font-size: 40px;
    position: absolute;
    top: -100px;
    right: 50px;
}

Чтобы этого избежать, можно позиционировать owl-prev и owl-next отдельно. Левую - через right, а правую - через left и calc.
Насчёт цвета, color нужно изменять в самой стрелке, а в :before - border-bottom-color.

Comments

[Norum]

Спасибо, работает! Но у меня почему-то правая стрелка отъезжает, когда удлиняется и подергивается. Я залил актуальную версию cn39614.tmweb.ru

[Aricus]

.spaces-gal .owl-next {
    position: absolute;
    top: -100px;
    left: 91%;
    width: 65px;
}

Там ширина задаётся. Потому при расширении удлинение стрелки занимает доступное место. Отступы нужно задавать через margin