如何在我的 Html 文件中/从我的 Html 文件中覆盖 a:before 属性值

Question

这是我的代码：

li a:before {
  transition: all 0.2s ease-in-out;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 5px 11px 0;
  border-color: transparent #d9d9d9 transparent transparent;
  position: absolute;
  left: -5px;
  top: 0;
}

<ul>
  <li>
    <a href="http://amino.dk"> </a>
  </li>
</ul>

现在我想从我的 html 文件中覆盖在我的 css a:before { border-color: transparent #d9d9d9 transparent transparent; } 中定义的颜色。

我希望我的用户选择他们喜欢的颜色。

我想在 Html 中覆盖边框颜色并且不想从我的 css 中删除 li a::before。

我觉得是这样的：

< a href="http://Amino.dk" style="border-color: transparent red transparent transparent;"> 

Answer 1

您始终可以在负责呈现该页面的 HTML 中的任何位置使用<style> 标记。我有一个示例 sn-p 给你：

<style>
  li a:before {
    border-color: #333; /* Or any other color you want in the borders */
  }
</style>

希望这会有所帮助。

Answer 2

您始终可以通过在 a-tag 中使用 style 标记来覆盖 CSS 样式。

为您的用户提供颜色选择，通过 JavaScript 获取所选颜色并将其传递给变量内的 a-tag。

这应该可以解决问题：

<a href="http://Amino.dk" style="border-color: transparent red transparent transparent">