在CSS之前使用，在后台添加圓圈

Question

我想在導航按鈕后面添加一個圓圈。 但我無法實現它。 我正在使用Swiper。

當我在導航箭頭下方定位圓圈時，這些是一些快照。

正如您所看到的，當我調整::之前的margin-left時，背景圓圈會超出導航按鈕。 我在css之前使用偽::來創建圓圈。 但我無法實現它。 這是我的css工作。 請檢查一下，讓我知道，我在哪里做錯了？

 .content .swiper-button-next { height: 25px; padding-left: 62px; padding-top: 0px; margin-top: -13px; z-index: 4 !important; position: absolute; } .swiper-button-next.swiper-button-white{ background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…2L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto; } .swiper-button-next, .swiper-button-prev { top: 50%; width: 27px; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .content .swiper-button-next:before { content: ''; display: inline-block; width: 50px; height: 50px; -moz-border-radius: 50%; border-radius: 50%; margin-left: -53px; margin-top: -11px; opacity: 0.7; z-index: -2; position: relative; background: #080808; } 

 <div class="content swiper-container-horizontal swiper-container-free-mode"> <div class="swiper-button-next swiper-button-white"></div> </div> 

先感謝您。

Answer 1

 .swiper-button-next:before { content: ''; display: inline-block; width: 50px; height: 50px; -moz-border-radius: 50%; border-radius: 50%; background-color: #060606; margin-left: -53px; margin-top: -11px; opacity: 0.8; z-index: -2; position: relative; } .swiper-button-next { height: 25px; padding-left: 62px; padding-top: 0px; margin-top: -13px; z-index: 4 !important; position: absolute; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…2L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto; top: 50%; width: 27px; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .arrow{ width: auto; display: inline-block; position: absolute; z-index: 9999; left: 31px; vertical-align: middle; color: #ffffff; opacity: 0.3; font-size:20px; } 

 <div class="swiper-button-next swiper-button-white"><div class="arrow">❯<div></div> 

Answer 2

請從.swiper-button-next div中刪除z-index來解決問題。

 .swiper-button-next:before { content: ''; display: inline-block; width: 50px; height: 50px; -moz-border-radius: 50%; border-radius: 50%; background-color: #060606; margin-left: -53px; margin-top: -11px; opacity: 0.8; z-index: -2; position: relative; } .swiper-button-next { height: 25px; padding-left: 62px; padding-top: 0px; margin-top: -13px; position: absolute; background-image: url(http://www.clker.com/cliparts/C/n/U/D/t/D/transparent-arrow-hi.png); right: 10px; left: auto; top: 50%; width: 27px; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } 

 <div class="swiper-button-next swiper-button-white"></div> 

Answer 3

您可以將符號放在pseudoelement的content屬性中：

 .swiper-button-next { height: 25px; padding-left: 62px; padding-top: 0px; margin-top: -13px; z-index: 4 !important; position: absolute; right: 10px; left: auto; top: 50%; width: 27px; cursor: pointer; text-align: center; } .swiper-button-next:before { content: '>'; color: white; display: inline-block; width: 50px; height: 50px; -moz-border-radius: 50%; border-radius: 50%; background-color: #060606; margin-left: -53px; margin-top: -11px; opacity: 0.8; z-index: -2; position: relative; line-height: 50px; /* vertically center the symbol */ } 

 <div class="swiper-button-next swiper-button-white"></div> 

Answer 4

請檢查一下這個片段，我已經改變了你的代碼

 .swiper-button-next::before { background-image: url("http://www.iconsdb.com/icons/preview/white/arrow-30-xxl.png"); background-repeat: no-repeat; background-size: 24px 29px; content: ""; display: inline-block; height: 50px; margin-top: 10px; opacity: 0.8; position: relative; right: -15px; width: 22px; z-index: -2; } .swiper-button-next { padding-top: 0px; margin-top: -13px; z-index: 4 !important; position: absolute; width: 50px; height: 50px; -moz-border-radius: 50%; border-radius: 50%; background-color: #060606; right: 10px; left: auto; top: 50%; cursor: pointer; } 

 <div class="swiper-button-next swiper-button-white"></div>