Сергей delphinpro

Это очень сложно

Спецификацию почитайте!
У инпутов нет псевдо элементов.
То, что они есть в некоторых браузерах — недокументированная возможность, не стоит использовать.

По теме: обычно таким образом стилизуется label/span или его псевдоэлемент.

<input>
<span></span>

input:checked + span {}
или (по ситуации)
input:checked ~ span {}

Ну а стандартный просто скрывается (display:none;)

align-items — это свойство flex-контейнера, а не потомка.

.widget {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

У потомков — align-self.
Названия свойств как бы намекают на своё предназначение.

Раньше этого сделать было нельзя.
Сейчас в спецификации появилось описание технологии css-shapes (см. на MDN).
Но, увы, поддержка на текущий момент слабовата — can i use css-shapes?

Попробуйте компромиссный вариант. Первую строку сделайте абзацем (text-indent) и увеличьте внутренний отступ у прямоугольника, чтобы остальные строки не лезли под картинку.

Генерируем скриптом 150 элементов, вспоминаем формулы окружности из курса школы, рассчитываем и располагаем точки в нужных местах.
Доп.инфо реализовать так же просто. Взять плагин для toolpit'ов, и навесить его на каждый элемент.

UPD https://codepen.io/delphinpro/pen/NaQjdm

.bg_left
{
  background-image: url(img/left.png);
  height: 800px;
  width: auto;
  background-size:cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: ($grid-gutter-width / -2); // <--
}

UPD
У вас картинка фоновая будет?
Сделайте лучше так https://jsfiddle.net/w2ex7vd9/1/

Эта фигня не будет работать.
# - это служебный символ URL, указывающий на фрагмент страницы.
любые другие символы будут интерпретироваться как адрес ресурса. Ваш пример должен инициировать простой переход по ссылке.

Можно перехватывать нажатия джаваскриптом, смотреть что там в href и крутить страницу к нужному элементу. Вероятно в вашей находке так и сделано.
Но это опять же не по феншую. Лучше используйте data-атрибут для ссылки на элемент.

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

https://github.com/necolas/normalize.css/blob/mast...

Загадочные отступы инлайн элементов

Или так https://jsfiddle.net/6vcudabe/4/

https://jsfiddle.net/DelphinPRO/8ex48rkb/

https://jsfiddle.net/DelphinPRO/kmb8s10a/

Как вам и нужно. IE/Edge в пролёте, да и фиг с ним.

У БЭМ не существует глубокой вложенности!
Блок -> Элемент
Всё.

Из этого и исходите.

Например

<div class="section">
  <div class="title">
    <h2>Заголовок</h2>
    <div class="title__subtitle">Подзаголовок</div>
  </div>
  <div class="inner features">
    <div class="features__item">
      <div class="block">
        <div class="block__icon">
          <img class="block__image" src="images/icon1.png" alt="" />
        </div>
        <div class="block__text">Текст текст текст текст текст</div>
      </div>
    </div>
    <div class="features__item">
      <div class="block">
        <div class="block__icon">
          <img class="block__image" src="images/icon1.png" alt="" />
        </div>
        <div class="block__text">Текст текст текст текст текст</div>
      </div>
    </div>
  </div>
</div>

Неизведанные глубины CSS: метрики шрифта, line-hei...

Оба варианта эквивалентны этому:

<main>
  <section>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque fugiat
    harum in modi odit quas sit temporibus.
    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate fuga
    hic minima provident quisquam quod repudiandae voluptate? Consequatur in,
    necessitatibus.
  <section>
</main>

Так в чем вопрос?
Да к тому же ваша секция не содержит заголовок. А должна бы...

Вот нашел ту старую блок-схему, просвещайтесь: