Как сделать сгенерированный контент доступным для выбора?

Я могу заставить CSS отображать идентификатор элемента, используя сгенерированный контент, например:

<style>
h2:hover:after {
  color: grey;
  content: "#" attr(id);
  float: right;
  font-size: smaller;
  font-weight: normal;
}
</style>
<h2 id="my-id">My ID</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et.</p>

Как я могу сделать этот сгенерированный контент ("#my-id") доступным для выбора, чтобы пользователь мог выделить и скопировать его?


css pseudo-element
person KatieK    schedule 11.11.2013    source источник
comment
Но вы можете. Это события-указатели: нет; Ответ здесь: stackoverflow.com/questions/21753590/   -  person Christine Rybka    schedule 28.10.2017
comment
См. также эту проблему w3c: github.com/w3c/csswg-drafts/issues/2894   -  person bbarker    schedule 19.01.2021

Ответы (2)


arrow_upward
43
arrow_downward

Вы не можете сделать псевдоэлемент доступным для выбора, так как он не существует в DOM.

5.10 Псевдоэлементы и псевдоклассы

Ни псевдоэлементы, ни псевдоклассы не отображаются в исходном документе или дереве документа.

person Josh Crozier    schedule 11.11.2013
comment
Жаль, что это невозможно :( Спасибо за ответ, хотя - person Jerry Green; 14.08.2020
comment
И все же они в некотором смысле находятся в DOM, потому что они отображаются в инспекторе DOM в браузерах. - person bbarker; 19.01.2021
comment
Верно, когда вы видите псевдоэлементы/классы в DOM-инспекторе браузера, это происходит потому, что браузер эмулирует/симулирует их присутствие (даже если их технически там нет). Примечание: я проверил проблему w3c, на которую вы ссылались, и я полностью согласен что есть много вариантов использования, в которых вы хотели бы иметь возможность выбрать его. - person Josh Crozier; 21.01.2021

arrow_upward
6
arrow_downward

Псевдоэлементы нет в DOM. Таким образом, вы не можете выбрать их.

person Praveen Kumar Purushothaman    schedule 11.11.2013