Ignore case sensitivity in a CSS attribute selector

By default, CSS attribute selectors are case-sensitive. It means that `a[href$=".png"]` has effect with the links whose extensions are `.png` only.

Imagine that you're building a files management application. It would add an icon to a file based on its extension. For example, the following CSS inserts an icon to any `.png` file.

a[href$='.png']:after {
    content: url(/img/png.svg);
}

In reality, the files are uploaded by the users and we can't control the file extensions. A png file can be named as `.png`, `.PNG`, `.pNG`.

In order to accept all of these variants, we can add `i` right before `]` in the selector.

a[href$='.png' i]:after {
    content: url(/img/png.svg);
}