时间戳

首页 > 解决方案 > 正文 rtl 或 ltr 时更改跨度图标

html - 正文 rtl 或 ltr 时更改跨度图标

问题描述

单击 div 时，我想使用 CSS 更改跨度内容。当 body direction 是时rtl，span content 必须是keyboard_arrow_left，然后ltr必须 span content 是keyboard_arrow_right。

这是我的 HTML 代码：

<div class="inner-item">
  <div>
    <h2 class="title m-0">
      Security Setting
    </h2>
  </div>
  <span class="icon"></span>
</div>

我想要单击inner-items跨度.icon更改内容时。

 .inner-sidebar {
  .inner-item {
    &.active {
      color: #ff5722;
      .icon::after {
        font-family: "Material Icons";
        body[dir="rtl"] {
          content: "keyboard_arrow_left";
        }
        body[dir="ltr"] {
          content: "keyboard_arrow_right";
        }
      }
    }
}

但是当我点击 div 它不会改变内容。

我该如何解决这个问题？

标签： htmlcss

解决方案

你的问题是 SCSS 结构。content 属性属于 icon:after 而不是 body-tag。

 .inner-sidebar {
  .inner-item {
    &.active {
      color: #ff5722;
      .icon::after {
        font-family: "Material Icons";
        content: "keyboard_arrow_right";
      }
    }
}


body[dir="rtl"] {
  .inner-item {
    &.active {
      color: #ff5722;
      
      .icon:after {
        content: "keyboard_arrow_left";
      }
    }
  }
}

我想你明白我的意思:)

推荐阅读