keslo

Использую данную библиотеку https://github.com/keslo/jquery-match-height

Вариантов много.
Если вам наведение нужно, то можно css одним отделаться.
Если событие клик, то можно обработчик вешать на JS, который будет управлять классами.

Код не могу накидать, так как с телефона пишу)

Может line-height поиграться?

Хорошо бы живой пример увидеть. А так - чудес не бывает. Если фон такой есть, то он где-то прописан.
Для начала проверьте размеры блоков для разных разрешений - col-md-*, col-sm-*, col-xs-* и т.д.

Попробуйте использовать отрисовку на canvas:
- рисуете розовый блок
- рисуете белый блок
- очищаете часть холста (дырка)
- добавляете текст

Например, в Bootstrap код модульного окна вместе с текстом вписан на страницу. Т.е. все это видно поисковикам. По событию данный код показывается пользователю, но фактически уже присутствует в исходном коде.

Возможно так jsfiddle.net/keslo/vts8v47m ?
Если сверстать согласно картинке, то мне кажется можно без after и прочей вакханалии.

А чем вам табличная верстка не угодила? Она как раз и создана для вашего случая.

Сделайте перпендикулярно линии идущей от вашего центра монитора к центру Земли. Так и проще, и удобнее, и правильнее.

Есть подобное на JQuery

Это элемент формы радио.
Я бы сделал так:
- скрыл стандартные элементы радио-кнопок в CSS
- сделал изображения активного и негативного чекбокса и присвоил их соответствующему положению чекбокса в том же CSS
Кажется так :-)

По кошерному лезть в код и менять имя атрибута веса или длины в миллилитры.
Либо коствль если дружите с JS, то заменять в этом блоке значение на ваше. Но лучше первый вариант :-)

У вас идея такая:
- Если ширина картинки больше, чем ширина окна, то... в свойство картинки width записываем height * на пропорцию картинки.

А где вообщем-то сам ресайз по горизонтали?

Если вы привязываетесь к ширине окна, то, по идее, если картинка шире окна, то присваиваем картинке ширину окна, а вот высоту картинки находим с помощью пропорции относительно новой ширины.

Я обычно добавляю к каждому элементу списка границу справа кроме последнего элемента.

Думаю, что это стоит реализовать на JavaScript, а не на CSS.

А чем не устраивает использование тега i? Или вы принципиально минимизирует код HTML в пользу CSS?

Вам привели код, который клеится на все элементы input. Если вам нужно добавить CSS к конкретному одному, то делайте дополнительную селекцию input в CSS.

Сори, но сперва напрашивается: нафига вообще такие ломаные фоны делать?

Может использовать селекторы на JQuery?