A lot of sites use the `::before` selector on an element to load icons via a client-downloaded font file, e.g.

```
div {
    font: 14px/1 FontAwesome;
}

div::before {
    content: "\f1c8";
}

```

Unfortunately the following rule also applies to the element's `::before` pseudo-element, which breaks the icon display:

```
div {
    font-family: sans-serif !important;
}

```

It's *not* possible to `:not(::before)` [(source)](https://stackoverflow.com/questions/33735496/can-css-not-selector-target-before-and-after-selectors), so how would you go about targeting an element, but not it's `::before`?

This worked decently, but it misses the text (if any) inside the element:

```
div:not([class*="fa-"]) {
    font-family: sans-serif !important;
}

```

It may not even be possible. No JavaScript, please.