在CSS伪元素中查找/替换内容

Question

[试图查找某些文本，这些文本由“：before”伪元素产生。

然后，我想更改该内容的CSS。

这甚至可能吗？这就是我所拥有的。

谢谢。

var $test = $('.test').html();
$test = $test.replace(/one/gi, '<span class="red">one</span>');
$test = $test.replace(/two/gi, '<span class="green">two</span>');
$test = $test.replace(/three/gi, '<span class="blue">three</span>');
$('.test').html($test);

.test:before { content: 'one two three';}

.red {color: red;}
.green {color: green;}
.blue {color: blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test"></div>

这里是fiddle。

Answer 1

如果只想替换带有一些html元素的内容。您可以尝试这种方式

var $test = $('.test');

// clear :before content data
$test.attr('data-before', '');

$test.append('<span class="red">one</span>');
$test.append('<span class="green">two</span>');
$test.append('<span class="blue">three</span>');

.test:before { content: attr(data-before);}

.red {color: red;}
.green {color: green;}
.blue {color: blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test" data-before="one two three"></div>

似乎是被黑客入侵。因为我们实际上没有replace任何东西，所以只显示和隐藏内容。

Answer 2

如注释中所述，您不能将HTML放在伪元素的内容内，但是可以使用and属性设置其内容，然后可以将该属性作为样式目标：

.test:before {
  content: attr(data-content);
}

.test[data-content="red"]:before {
  color: red;
}
  
.test[data-content="green"]:before {
  color: green;
}

<div class="test" data-content="red"></div>
<div class="test" data-content="green"></div>

这是我能想到的唯一解决方法，当然，您可以使用javascript更改data-content属性，它的工作原理完全相同（您只需要在CSS中设置一个具有样式的值即可）