<div>没有显式设置dir属性</div>
<div>There is no explicit setting of the dir attribute!</div>
<div dir="ltr">从左向右排列</div>
<div dir="ltr">Left to right!</div>
<div dir="rtl">从右向左排列</div>
<div dir="rtl">Right to left</div>

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  background: white;
  border-radius: 8px;
  padding: 20px;
  min-width: calc(100vw / 6 - 120px);
  position: relative;
  border: 1px solid #f3f;
  margin: 10px;
  
  &::after {
    content: 'dir = "' attr(dir) '"';
    position: absolute;
    padding: 10px;
    background: linear-gradient(to right, #f36, #f63);
    color: #fff;
    border-radius: 5px;
    top: -25px;
    left: 20px;
    direction: ltr;
  }
}

[dir="ltr"] {
  color: green;
  border-color: green;
}

[dir="rtl"]{
  color: #f36;
  border-color: #f36;
}

body :dir(ltr) {
  color: orange;
  border: 2px solid orange;
}