CSS selector to select second element after hyphen

The CSS selector [attr|=value]

is for selecting elements that are exactly "value" or that start with "value-". This was originally intended to select all languages ​​regardless of dialect, such as "en-au", "en-ca", "en-gb", "en-us".

What I'm looking for is a selector for an element that is exactly "value", which includes "-value" or ends with "-value". In my case, I am not interested in language codes at all.

This page claims there is an operator =\

:

[data-value=|"foo"] {
  /* Attribute value has this in a dash-separated list somewhere */
}

      

        
        
        
      

    

However, I was unable to get this to work. If I'm just interested in a 2-item controlled list of terms, this will work for me:

[attr*=-value][attr$=value]

      

        
        
        
      

    

However, this will also return elements like "xx-valuevalue", so the result is not perfect.

My question is, is there any other way to write a CSS selector that will select all elements that have a given string as one element in a delimited list in the definition?