.breadcrumb{ display: inline-block; padding: 10px 0 0 0; margin: 0; border-top: 4px solid #8633cb; border-radius: 0; background: transparent; overflow: hidden; } .breadcrumb li{ float: left; margin-right: 10px; border: 1px solid rgba(0,0,0,0.1); border-radius: 5px; font-size: 16px; font-weight: bold; color: #000; text-transform: uppercase; position: relative; transition: all 0.3s ease 0s; } .breadcrumb li:hover{ background: #8633cb; } .breadcrumb li:last-child{ padding: 3px 15px; margin-right: 0; background: #8633cb; color: #fff; } .breadcrumb li:last-child:after{ content: ""; width: 5px; margin: 0 auto; border: 10px solid transparent; border-top: 10px solid #8633cb; position: absolute; bottom: 20px; left: 0; right: 0; } .breadcrumb li:before{ display: none; } .breadcrumb li a{ display: block; padding: 3px 15px; font-size: 16px; font-weight: bold; color: #000; } .breadcrumb li:hover a{ color: #fff; } @media only screen and (max-width: 767px){ .breadcrumb li:last-child, .breadcrumb li a{ padding: 3px 10px; } } @media only screen and (max-width: 479px){ .breadcrumb li{ margin-right: 5px; } .breadcrumb li:last-child, .breadcrumb li a{ padding: 3px 5px; font-size: 12px; } }