<ins> элемент вставленного текста HTML

Элемент <ins> HTML представляет собой диапазон текста, добавленный в документ. Для обозначения диапазона текста, удалённого из документа, можно использовать элемент <del>.

Попробуйте

<p>&ldquo;You're late!&rdquo;</p>
<del>
  <p>&ldquo;I apologize for the delay.&rdquo;</p>
</del>
<ins cite="../how-to-be-a-wizard.html" datetime="2018-05">
  <p>&ldquo;A wizard is never late &hellip;&rdquo;</p>
</ins>

del,
ins {
  display: block;
  text-decoration: none;
  position: relative;
}

del {
  background-color: #ffbbbb;
}

ins {
  background-color: #d4fcbc;
}

del::before,
ins::before {
  position: absolute;
  left: 0.5rem;
  font-family: monospace;
}

del::before {
  content: "−";
}

ins::before {
  content: "+";
}

p {
  margin: 0 1.8rem;
  font-family: "Georgia", serif;
  font-size: 1rem;
}

Атрибуты

Этот элемент включает глобальные атрибуты.

cite

Этот атрибут задаёт URI ресурса, в котором описывается изменение, например ссылку на протокол встречи или заявку в системе отслеживания ошибок.

datetime

Этот атрибут указывает дату и время изменения и должен содержать допустимую дату с необязательной строкой времени. Если значение не удаётся разобрать как дату с необязательной строкой времени, у элемента нет связанной временной метки. Формат строки без времени см. в разделе Формат допустимой строки даты. Формат строки, содержащей и дату, и время, описан в разделе Формат допустимой строки локальных даты и времени.

Доступность

Большинство средств чтения с экрана в стандартной конфигурации не объявляют о наличии элемента <ins>. Чтобы он объявлялся, можно использовать свойство CSS content вместе с псевдоэлементами ::before и ::after.

ins::before,
ins::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

ins::before {
  content: " [insertion start] ";
}

ins::after {
  content: " [insertion end] ";
}

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

• Краткое примечание о том, как сделать вашу разметку доступнее | Vispero
• Настройка стилей текста | Adrian Roselli

Примеры

<ins>This text has been inserted</ins>

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Элемент <del> для обозначения удаления из документа