text: Q:
  
  Вывести средством css сообщение о неверности поля почты
  
  <label for="email">email</label>
  <input type="email" name="email" class="newTask__email" required />
  
  для input[type=email]:invalid только с css нужно вывести сообщение о ошибке валидации. 
  input[type=email]:invalid+label:before {
     color: red;
     content: "email не валиден";
  }
  
  это дает сообщению висеть все время в фаерфокс, в хроме вообще не показывает.
  как это нормально сделать?
  
  A:
  
  С такой разметкой, как в вопросе, невозможно добиться поставленной задачи только с помощью CSS.
  
  В теге <label> атрибут for принимает значение атрибута id (не name!), того элемента, к которому привязывается. У Вас атрибут id в теге <input> не указан.
  Селектор + в данном правиле (input[type=email]:invalid + label:before) подразумевает наличие тега <label> сразу за тегом <input>. У Вас они стоят наоборот.
  
  Ниже  приведён очень "костыльный" вариант, но похоже, что единственный. При этом, разметку всё же нужно править. (В вашем случае, подход - только CSS - изначально неверный.)
  
  input[type=email]:invalid+label::after {
    content: "E-mail не валиден";
    white-space: nowrap;
    position: absolute;
    left: 100%;
    top: 100%;
    padding: 3px;
    border: 1px solid red;
  }
  
  label {
    position: relative;
    float: left;
    padding: 3px;
  }
  <input type="email" id="email_1" name="email_1" class="newTask__email" autocomplete="new-password" required />
  <label for="email_1">E-mail</label>
  <br><br><br>
  <input type="email" id="email_2" name="email_2" class="newTask__email" autocomplete="new-password" required pattern="\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b" />
  <label for="email_2">E-mail</label>
  <br><br><br>
  <input type="email" id="email_3" name="email_3" class="newTask__email" autocomplete="new-password" pattern="\b[\w\.-]+@[\w\.-]+\.\w{2,4}\b" />
  <label for="email_3">E-mail</label>
  
  