Как вывести спидбар с заданными стилями в css

[Dnny 0]

В сверстанном html шаблоне, который я делаю в шаблон dle код такой:

<div class="page__header">
   <div class="container">
      <div class="breadcrumbs">
         <div class="breadcrumbs__buttons">
            <a href="index.html" class="breadcrumbs__btn breadcrumbs__btn-home">
              <svg>
                <use xlink:href="#home"></use>
              </svg>
            </a>
            <a href="#" class="breadcrumbs__btn breadcrumbs__btn-back">
              <svg>
                <use xlink:href="#arrow-unline"></use>
              </svg>
           </a>
        </div>
        <div class="breadcrumbs__links">
	       <a href="index.html" class="breadcrumbs__item">
		     <span>Главная</span>
	       </a>
	       <a href="/category/" class="breadcrumbs__item breadcrumbs__item_back">
		     <span>Категория</span>
	       </a>
	       <a href="#" class="breadcrumbs__item active">
		     <span>Какая-то страница категории</span>
	       </a>
        </div>
    </div>
  </div>
</div>

В стилях так:

.breadcrumbs {
  margin: 24px 0 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

  .breadcrumbs__btn svg {
    width: 16px;
    height: 16px;
    fill: #BF9D77;
    margin-right: 20px;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear; }

    .breadcrumbs__btn svg:nth-child(2) {
      display: none; }

  .breadcrumbs__btn:hover svg {
    fill: #983031; }

  .breadcrumbs__btn-back {
    display: none; }

    .breadcrumbs__btn-back svg {
      width: 12px;
      height: 12px; }

  .breadcrumbs__links {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }

  .breadcrumbs__item {
    display: inline-block;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-left: 48px;
    position: relative;
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear; }

    .breadcrumbs__item:first-child {
      margin-left: 0; }

      .breadcrumbs__item:first-child:before {
        display: none; }

    .breadcrumbs__item:before {
      content: "";
      width: 1px;
      height: 18px;
      background-color: #2B323C;
      opacity: 0.2;
      -webkit-transform: rotate(-25.77deg) translateY(-50%);
      -ms-transform: rotate(-25.77deg) translateY(-50%);
      transform: rotate(-25.77deg) translateY(-50%);
      position: absolute;
      top: 50%;
      left: -23.5px;
      z-index: 1; }

    .breadcrumbs__item span {
      font-family: "Roboto", sans-serif;
      font-size: 12px;
      font-weight: 400;
      color: #2B323C;
      line-height: 1.5;
      -webkit-transition: all .2s linear;
      -o-transition: all .2s linear;
      transition: all .2s linear; }

    .breadcrumbs__item:hover span {
      color: #BF9D77; }

    .breadcrumbs__item.active span {
      color: #2B323C;
      opacity: 0.3; }

Не понимаю как сделать стили в css. Спидбар выводится тегом {speedbar} в tpl:

<div class="breadcrumbs__links">
   <div class="breadcrumbs__item"> 
       <span>{speedbar}</span>							
   </div>           
</div>

Если записать в таком виде то выводится так:

<div class="breadcrumbs__links">
   <div class="breadcrumbs__item"> 
     <span>
        <a href="index.html">Главная</a>&emsp; &raquo; &emsp;
        <a href="/category/">Производство</a>&emsp; &raquo; &emsp;Какая-то страница категории
     </span>							
   </div>           
</div>

А мне надо как в первом коде.

Изменено 10 августа 2022 пользователем Dnny

[Dnny 0]

Спасибо что никто не помог. :) Проблема решена.