<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <div class="container nav-cat"> <div class="row"> <div class="mhk-box"> <div class="box-header"> <span class="caption"><i class="fas fa-bars"></i><span class="mr-1">دسته بندی محصولات</span></span> </div><!--.box-header--> <div class="box-body"> <ul class="nav flex-column category"> <li class="nav-item"> <a class="nav-link" href="#"> <i class="fas fa-caret-left caret"></i> عنوان </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="fas fa-caret-left caret"></i> عنوان </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> عنوان </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> عنوان </a> </li> </ul> </div><!--.box-body--> </div> </div> </div>

body{ background:#f8f8f8; } .mhk-box .box-header { background-color: #ee3048; color: #ffffff; height: 43px; direction: rtl; text-align: right; } .mhk-box .box-header .caption { display: block; padding: 12px 10px; } .mhk-box .box-body { background: #ffffff; } .category { text-align: right; } .category li { border: 0 !important; border-bottom: 1px solid #e9e9e9 !important; } .category li:last-child { border: 0 !important; } .category li a { color: #000; position: relative; } .category li a .caret { position: absolute; left:10px; top:13px; } .category li a:hover { color: #ee3048; text-decoration: none; }