Можно ли выбрать css-контент?

Скажем, я отмечаю:

<div data-generated="world!">Hello </div>

.. с CSS:

div:after {
    content: attr(data-generated);
}

Это создает текст: Hello world! - FIDDLE

div:after {
    content: attr(data-generated);
}

<div data-generated="world!">Hello </div>

Ответы

Ответ 1

Нет, вы не можете.

Смотрите Выбор и использование псевдоэлементов CSS, таких как:: before и:: после использования jQuery. Чтобы повторить то, что описано там, сгенерированный контент не является частью DOM.

В словах спецификация CSS2.1,

Сгенерированный контент не изменяет дерево документа.

Сгенерированный контент существует только в визуальном мире механизма рендеринга. Выбор - выбор частей DOM. Сгенерированный контент не находится в DOM, поэтому его нельзя выбрать. По той же причине не могут быть выбраны сгенерированные счетчики или маркеры списка.

Ответ 2

Не храните содержимое, которое должно быть видимым и доступным в атрибутах data, потому что вспомогательная технология может не получить к ним доступ.

Проверьте эти ссылки:

http://www.karlgroves.com/2013/08/26/css-generated-content-is-not-content/ https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Ответ 3

Вместо фактического выбора сгенерированного контента вы можете имитировать это с помощью javascript.

Я наткнулся на этот блог Дэвида Уолша, где он предоставляет код, который извлекает сгенерированный контент.

Используя это, вы можете добавить сгенерированный контент в обычный контент для имитации выбора сгенерированного контента, затем вы можете установить сгенерированный контент с display:none, чтобы он не отображался дважды. Вот так:

FIDDLE

String.prototype.unquoted = function() {
  return this.replace(/(^')|('$)/g, '')
}

var element = document.getElementById('div1');

var content = window.getComputedStyle(
  element, ':after'
).getPropertyValue('content');

element.innerHTML = element.innerHTML + content.unquoted();

console.log(content.unquoted());

div:after {
  content: attr(data-generated);
  display: none;
}

<div id="div1" data-generated="world!">Hello</div>