如何覆盖pseudo ::/:: exterm element之前的pseudo ::的CSS内容属性？

Question

这个问题并不是重复的，尽管对于某人来说，它可能看起来很仔细地阅读。

这不是关于CSS特异性的问题，也不是关于！重要指令（我不认为）。

我要学习的是：当使用（Unicode？）Fontawesome代码作为我的' content ' :: pseudo元素中的属性值时为项目列表设置基本自定义子弹， 仅通过更改“内容”值来更改每个子弹图标？

Answer 1

这是我解决的方式：

/* FA ICONS */
:root {
   --lt-gray: #99a7a7;
   --lav: #5990bf;
   --client: brown;

   --fa-phone: '\f098';
   --fa-email: '\f0e0';
   --fa-linkedin: '\f08c';
   --fa-portfolio: '\f0b1';
   --fa-github: '\f09b';
}

/* UL */
.ehw-contact {
  background: orange;
  list-style: none;
  width: 50vw;
  padding: 1rem;
}

.ehw-contact li {
  background: aliceblue;
  margin: .3rem
}

/* Color, Padding, other Basic Config for bullets */
.ehw-contact li:before {
  font-family: "FontAwesome";
  content: "\f082";
  margin: 1rem;
  color: purple;
/*   font-size: 1.3rem; */
}

/* List Items */
.ehw-contact .phone:before { content: '\f098'}
.ehw-contact .email:before {content: '\f0e0'}
.ehw-contact .linkedin:before {content: '\f08c'}
.ehw-contact .portfolio:before {content: '\f0b1'}
.ehw-contact .github:before {content: '\f09b'}

<link href="https://static.fontawesome.com/css/fontawesome-app.css" rel="stylesheet"/>
<ul class="ehw-contact">
  <li class=" phone">Phone: 999-999-9999</li>
  <li class=" email">Email: [email protected]</li>
  <li class=" linkedin">LinkedIn: https:linkedin.com/in/erichepperle</li>
  <li class=" portfolio">Portfolio: erichepperle.com/</li>
  <li class=" github">GitHub: @codewizard13</li>
</ul>

（ codepen在这里）

，这是结果：

说明：

中间尝试：

• 最初是我设置了root css图标值变量，但是我无法让它们在
• 我尝试使用的覆盖范围内工作:: and single：single：

工作解决方案：

1. < p>首先，我们定义了一些CSS字体很棒的图标变量，但我们不使用它们。我本来可以将其作为多行评论，但是在这种情况下，我感到定义（未使用的）根变量使我的意图更加明确。

2. 接下来定义和样式的UL，该UL充当容器元素

3. 样式li Elements

4. 定义A 基本样式 字体很棒的图标子弹带有1REM余量和紫色的图标颜色，并将Square Facebook徽标设置为“内容” '使用：伪元素之前的值。注意：事实证明单身（:)正常工作（而不是：:)，尽管我不完全确定为什么

5. 对于每个列表项目，我通过选择每个li applied class设置了子弹样式（电子邮件，portfolio，portfolio，等）仅更改内容属性值。