css - 多语言站点的块引用反转

Question

“我将编写一个包含阿拉伯语的网站。它从右到左读。格式将用于页面的其余部分，但不适用于块引用。我尝试使用 lang 属性设置它，但是当我这样做时，在引号开始之前。我正在向社区寻求经验和可能的陷阱。

'''

blockquote {
  background-color: #f4f7fc;
  font-size: 20px;
  color: #191514;
  line-height: 1.7;
  position: relative;
  padding: 50px 30px 30px 115px;
  font-family: 'Poppins', sans-serif;
  clear: both;
  margin: 40px 0;
  overflow: hidden;
  
}

blockquote p {
  margin-bottom: 0 !important;
}
blockquote cite {
  font-style: normal;
  display: block;
  color: #9b6f45;
  font-weight: 700;
  font-size: 16px;
  margin-top: 11px;
}

    
blockquote:before {

  content: '\f10d';
  font-family: "FontAwesome";
  color: #d5aa6d;
  font-size: 28px;
  position: absolute;
  left: 22px;
  top: 10px;
  font-style: normal;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d5aa6d), to(#9b6f45));
  background-image: -webkit-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -moz-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -ms-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -o-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: linear-gradient(top, #d5aa6d, #9b6f45);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d5aa6d', endColorStr='#9b6f45');
  background-color: transparent;
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  z-index: 2;
  }

blockquote:after {
   content: '\f10e';
  font-family: "FontAwesome";
  color: #d5aa6d;
  font-size: 28px;
  position: absolute;
  right: 22px;
  bottom: 10px;
  font-style: normal;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d5aa6d), to(#9b6f45));
  background-image: -webkit-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -moz-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -ms-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -o-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: linear-gradient(top, #d5aa6d, #9b6f45);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d5aa6d', endColorStr='#9b6f45');
  background-color: transparent;
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  z-index: 2;
}
}

'''
'''

<blockquote lang="en">
<ul>
    <li>This is in english</li>
    </ul>
</blockquote>

<blockquote lang="ar">
<ul>
    <li>هذا باللغة العربية</li>
    
</ul>
</blockquote>

'''

Answer 1

您可以在 blockquote 标签上定位属性 lang 并添加方向规则：

blockquote[lang="ar"] {
  direction: rtl;
}

blockquote {
  background-color: #f4f7fc;
  font-size: 20px;
  color: #191514;
  line-height: 1.7;
  position: relative;
  padding: 50px 30px 30px 115px;
  font-family: 'Poppins', sans-serif;
  clear: both;
  margin: 40px 0;
  overflow: hidden;
}

blockquote[lang="ar"] {
  direction: rtl;
}

blockquote p {
  margin-bottom: 0 !important;
}
blockquote cite {
  font-style: normal;
  display: block;
  color: #9b6f45;
  font-weight: 700;
  font-size: 16px;
  margin-top: 11px;
}

    
blockquote:before {
  content: '\f10d';
  font-family: "FontAwesome";
  color: #d5aa6d;
  font-size: 28px;
  position: absolute;
  left: 22px;
  top: 10px;
  font-style: normal;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d5aa6d), to(#9b6f45));
  background-image: -webkit-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -moz-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -ms-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -o-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: linear-gradient(top, #d5aa6d, #9b6f45);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d5aa6d', endColorStr='#9b6f45');
  background-color: transparent;
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  z-index: 2;
  }

   blockquote[lang="ar"]:before {
  content: '\f10e';
  right: 22px;
  left: auto;
}

blockquote:after {
   content: '\f10e';
  font-family: "FontAwesome";
  color: #d5aa6d;
  font-size: 28px;
  position: absolute;
  right: 22px;
  bottom: 10px;
  font-style: normal;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d5aa6d), to(#9b6f45));
  background-image: -webkit-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -moz-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -ms-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: -o-linear-gradient(top, #d5aa6d, #9b6f45);
  background-image: linear-gradient(top, #d5aa6d, #9b6f45);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d5aa6d', endColorStr='#9b6f45');
  background-color: transparent;
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -webkit-text-fill-color: transparent;
  z-index: 2;
}

blockquote[lang="ar"]:after {
  content: '\f10d';
  right: auto;
  left: 22px;
}

'''
'''

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

<blockquote lang="en">
<ul>
    <li>This is in english</li>
    </ul>
</blockquote>

<blockquote lang="ar">
<ul>
    <li>هذا باللغة العربية</li>
    
</ul>
</blockquote>

Answer 2

将类添加到 blockquote 元素，并将类样式方向属性设置为 rtl