麪包屑箭頭RTL方向

Question

我修改了代碼麪包屑爲從右至左方向，但文字不看的jsfiddle工作精細這段代碼Arrow如何文本顯示：jsfiddle.net/tr7th3d2

<style> 

    .breadcrumb { 
     list-style: none; 
     overflow: hidden; 
     font: 18px Helvetica, Arial, Sans-Serif; 
    } 
    .breadcrumb li { 
     float: left; 
    } 
    .breadcrumb li a { 
     color: white; 
     text-decoration: none; 
     padding: 10px 0 10px 55px; 
     background: brown;     /* fallback color */ 
     background: hsla(34,85%,35%,1); 
     position: relative; 
     display: block; 
     float: left; 
    } 
    .breadcrumb li a:after { 
     content: " "; 
     display: block; 
     width: 0; 
     height: 0; 
     border-top: 50px solid transparent;   /* Go big on the size, and let overflow hide */ 
     border-bottom: 50px solid transparent; 
     border-right: 30px solid hsla(34,85%,35%,1); 
     position: absolute; 
     top: 50%; 
     margin-top: -50px; 
     right: 100%; 
     z-index: 2; 
    } 
    .breadcrumb li a:before { 
     content: " "; 
     display: block; 
     width: 0; 
     height: 0; 
     border-top: 50px solid transparent;   /* Go big on the size, and let overflow hide */ 
     border-bottom: 50px solid transparent; 
     border-right: 30px solid white; 
     position: absolute; 
     top: 50%; 
     margin-top: -50px; 
     margin-right: 1px; 
     right: 100%; 
     z-index: 1; 
    } 
    .breadcrumb li:first-child a { 
     padding-right: 10px; 
    } 
    .breadcrumb li:nth-child(2) a  { background:  hsla(34,85%,45%,1); } 
    .breadcrumb li:nth-child(2) a:after { border-right-color: hsla(34,85%,45%,1); } 
    .breadcrumb li:nth-child(3) a  { background:  hsla(34,85%,55%,1); } 
    .breadcrumb li:nth-child(3) a:after { border-right-color: hsla(34,85%,55%,1); } 
    .breadcrumb li:nth-child(4) a  { background:  hsla(34,85%,65%,1); } 
    .breadcrumb li:nth-child(4) a:after { border-right-color: hsla(34,85%,65%,1); } 
    .breadcrumb li:nth-child(5) a  { background:  hsla(34,85%,75%,1); } 
    .breadcrumb li:nth-child(5) a:after { border-right-color: hsla(34,85%,75%,1); } 
    .breadcrumb li a:hover { background: hsla(34,85%,25%,1); } 
    .breadcrumb li a:hover:after { border-right-color: hsla(34,85%,25%,1) !important; } 

</style> 


<div id="page-wrap"> 


    <ul class="breadcrumb"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Vehicles</a></li> 
     <li><a href="#">Vans</a></li> 
     <li><a href="#">Camper Vans</a></li> 
     <li><a href="#">1989 VW Westfalia Vanagon</a></li> 
    </ul> 

</div> 

這個原代碼： https://css-tricks.com/triangle-breadcrumbs/

Answer 1

必須更改標籤填充

.breadcrumb li a { 
    padding: 10px 55px 10px 0px; 
}