为什么当我添加 div::before 时第一个字母不起作用？

Question

我想在不更改 HTML 脚本的情况下更改“Elzero”中第一个字母“E”的颜色，但是当我使用 div::first-letter {color: #f44336} 时，除非我删除 :before 伪元素，否则颜色不会改变。为什么？ 我尝试添加 !important : div::first-letter {color: #f44336 !important;} 但它没有改变。

这是代码：

div::first-letter {
  color: #f44336;
}

div {
  width: 600px;
  margin: 0 auto;
  background-color: #eee;
  text-align: center;
  padding: 0px;
  padding-top: 25px;
  padding-bottom: 25px;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 7px;
  position: relative;
  border-right: 10px solid #673ab7;
  border-left: 10px solid #f44336;
}

div::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 10px;
  background-image: linear-gradient( to right, #f44336 0%, #f44336 20%, #2196f3 20%, #2196f3 40%, #4caf50 40%, #4caf50 60%, #e91e63 60%, #e91e63 80%, #673ab7 80%, #673ab7 100%);
}

div::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 10px;
  background-image: linear-gradient( to right, #f44336 0%, #f44336 20%, #2196f3 20%, #2196f3 40%, #4caf50 40%, #4caf50 60%, #e91e63 60%, #e91e63 80%, #673ab7 80%, #673ab7 100%);
}

<div>Hello</div>

我想做这样的设计：

Answer 1

使用边框图像并简化您的代码：

.box::first-letter {
  color: #f44336;
}

.box {
  width: 600px;
  margin: 0 auto;
  background: #eee;
  text-align: center;
  padding:25px 0px;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 7px;
  border:10px solid;
  border-image:linear-gradient( 90deg, #f44336 20%, #2196f3 0 40%, #4caf50 0 60%, #e91e63 0 80%, #673ab7 0) 10
}

<div class="box">Hello</div>

Answer 2

为了避免干扰 firefox(??选择 which : first-letter 还是坚持伪 ?!?) 直接在 div 内使用渐变。

例子

div::first-letter {
  color: #f44336;
}

div {
  width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 0px;
  padding-top: 25px;
  padding-bottom: 25px;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 7px;
  position: relative;
  border-right: 10px solid #673ab7;
  border-left: 10px solid #f44336;
  background: linear-gradient( to right, #f44336 0%, #f44336 20%, #2196f3 20%, #2196f3 40%, #4caf50 40%, #4caf50 60%, #e91e63 60%, #e91e63 80%, #673ab7 80%, #673ab7 100%) 0 0 / 100% 10px no-repeat;
  background-color: #eee;
}



div::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 10px;
  background-image: linear-gradient( to right, #f44336 0%, #f44336 20%, #2196f3 20%, #2196f3 40%, #4caf50 40%, #4caf50 60%, #e91e63 60%, #e91e63 80%, #673ab7 80%, #673ab7 100%);
}

<div>Hello</div>

注意：两个渐变都可以添加到 div 本身中，为其他东西丢弃伪。