Not sure this is possible with CSS only, can the content of a pseudo selector contain a regular expression?
In this scenario:
.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
Thanks.
CSS does not support partially inserting attribute values as content. You can concatenate one or more
attr()expressions and/or strings interchangeably, but you can't have part of an attribute value.