使用 CSS 更改前选择器中的项目符号颜色

Question

我正在尝试更改要点的颜色。通过下图你会更好地理解我的要求。

到目前为止，我已经成功了，但是我找不到将项目符号点更改为红色的方法。

这是我的 CSS :

h3#one {
    display: flex;
    flex-direction: column;
}

h3#one::before {
    content: '1.';
    font-size: 40px;
    margin-right: 24px;
    margin-bottom: 8px;
}

<h3 id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>

有没有办法用 CSS 来实现？

Answer 1

我不认为你可以用伪 class 实现这一点，但你可以这样做。

h3 {
  display:block;
}

h3 .red {
  font-size: 40px;
  margin-right: 24px;
  margin-bottom: 8px;
  color: red;
}

<h3>1<span class="red">.</span></h3>
<h3> Test</h3>

Answer 2

如果你只想要点红色，你可以用这样的跨度来做：<h3>Your text<span style="color: red">.</span></h3>

Answer 3

可以。您只是不应该在 pseudo-class 中使用“1”。相反，将值放在标签内并仅使用 ::before 来设置点的样式。

h3 {
display: flex;
flex-direction: column;}

h3::before {
position: absolute;
top: 0;
margin-left: 10px;
color: red;
content: '.';
font-size: 40px;
margin-right: 24px;
margin-bottom: 8px;}

<html>
<body>
<h3>1</h3>
</body>
</html>

如果您不想要这种方法，我建议您使用 span 标签来解决问题。

<h3>1<span style="color: red">.</span></h3>

Answer 4

您可以使用渐变背景和 background-clip: text。

h3 {
    display: flex;
    flex-direction: column;
}

h3::before {
    counter-reset: num var(--num);
    content: counter(num) '.';
    font-size: 40px;
    margin-right: 24px;
    margin-bottom: 8px;
    align-self: start;
    background-image: linear-gradient(90deg, red, red), linear-gradient(90deg, black, black);
    background-size: 0.25em, auto;
    background-position: right;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

<h3 style="--num: 1">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<h3 style="--num: 2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<h3 style="--num: 3">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<h3 style="--num: 42">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<h3 style="--num: 256">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>

但这并不可靠。 background-clip: text 属性在某些浏览器上仍处于前缀之下。并且您需要根据字体手动设置数字和点之间的渐变截止值。

使用 CSS 更改前选择器中的项目符号颜色

Change a bullet point color within a before selector with CSS

css

pseudo-element