Question 44007 in Html Question posted in
Some basic documentation can be found here.

Change color slash " / " breadcrumb – Html

How to change the slash color " / " in breadcrumb. I’ve tried to add color in css, there is no change

<ol class="breadcrumb" style="font-size: 20px;">
   <li class="breadcrumb-item" href="/homepage/index.html">
      Home
   </li>
   <li class="breadcrumb-item">
      Package
   </li>
   <li class="breadcrumb-item">
      <span class="text-danger">Nusa Penida</span>
   </li>
</ol>

.section-details-header{
  min-height: 43px;
  background: ; 
  margin-top: -45px;
}

.section-details-content{
  color:#ffffff;
}
.breadcrumb{
  color:#fff;
 text-align: center;
 justify-content: right;
}
Tags:

2

Answers


  1. 0

    / characters are actually ::before pseudo-elements; use that to re-stylize them:

    .breadcrumb > li + li::before {
  color: #f00 !important;
}

    Try it:

    .breadcrumb > li + li::before {
  color: #f00 !important;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<ol class="breadcrumb">
  <li class="breadcrumb-item">Level 1</li>
  <li class="breadcrumb-item">Level 2</li>
  <li class="breadcrumb-item active">Level 3</li>
</ol>
    Login or Signup to reply.
  2. 0 
    <ol class="breadcrumb" style="font-size: 20px;">
    <li class="breadcrumb-itemsection-details-header" href="/homepage/index.html">
      Home <span style='color:red'>/</span>
    </li>
   <li class="breadcrumb-item">
      Package <span style='color:red'>/</span>
   </li>
   <li class="breadcrumb-item">
      <span class="text-danger">Nusa Penida</span>
   </li>
</ol>

    use style or class in same or new li tag with slash.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search