如何在 html 文件中覆盖 :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>

标签。我有一个示例片段给您：

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

希望这有帮助。

Answer 2

您始终可以通过在

style

标签中使用

a

标签来覆盖 CSS 样式。

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

a

标签。

这应该可以解决问题：

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