在 CSS 伪元素中使用正则表达式答案

【问题标题】：Using regular expression in CSS pseudo element在 CSS 伪元素中使用正则表达式
【发布时间】：2021-12-31 21:43:23
【问题描述】：

不确定仅使用 CSS 是否可行，伪选择器的 content 可以包含正则表达式吗？

在这种情况下：

.normal-class::before {
  /*content: attr(class); => this works, but outputs both classes */
}


/*  
DOES NOT WORK
.normal-class::before {
  content: attr(class[^=special]); 
}*/

/*  
DOES NOT WORK
.normal-class::before {
  content: attr(class^=special);
}
*/

/*  
DOES NOT WORK
.normal-class::before {
  content: attr(class^=['special']);
}
*/

.normal-class::before {
  content: attr([class^="special"]); /* NOT WORKING EITHER */
}

<div class="special-class normal-class"></div>

DESIRED OUTPUT:<br>
special-class

谢谢。

【问题讨论】：

也许this 可以提供帮助
@Sfili_81，包括它作为选择器工作，但我需要在伪选择器的内容值内。
[attr*=value] ?
[attr*=value]，怎么样？
你不能用 CSS 做到这一点

标签： css regex pseudo-element css-content

【解决方案1】：

CSS 不支持部分插入属性值作为内容。您可以交替连接一个或多个 attr() 表达式和/或字符串，但不能包含属性值的一部分。

【讨论】：