CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsass
psudo
psudo

Reputation: 1568

Override pseudo class elements bootstrap

nav {
  ol.breadcrumb {
    background-color: unset;

    .breadcrumb-item {
      a {
        color: #0a0a0a;

        &:hover {
          color: #0a0a0a;
          text-decoration: underline;
        }
      }
      &:before {
        &:not(:first-child){
          content: ">>" !important;
        }
      }
    }    
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

The above code is of the bootstrap breadcrumbs.In the above SCSS code I've tried to change the pseudo element content "/" to ">>" but the code is not working for me.

If I remove &:not(:first-child) section it works. But I don't want ">>" to appear for the first element.

Upvotes: 1

Views: 344

Answers (1)

johannchopin
johannchopin

Reputation: 14873

The default bootstrap nav has more specific styles than yours. There are written like this in scss:

nav {
  ol.breadcrumb {
    .breadcrumb-item {
      & + .breadcrumb-item {
        &::before {
          content: ">>" !important;
        }
      }
    }
  }
}

Check the demo here.

Upvotes: 1

Related Questions