javascript - 如何使文本自动出现在 HTML 页面中的所有 blockquote 之后？

Question

我有一个 blogspot 网站。但是我遇到了模仿者的问题。有人盗用我博客的内容。从我的网站来看，它是不合法的。我禁用了使用 javascript 的右键单击和禁用了使用 CSS 的内容选择。但是有些内容是开源的。我想在 blockquote 标记之后显示一个文本，例如“使用 Ctrl+C 从 blockquote 中复制以下文本”这可能吗？

Answer 1

您可以使用 CSS :after 伪选择器在选择器匹配后添加内容，在本例中为 blockquote。

blockquote:after {
  content: "Use Ctrl+C to copy the text";
  display: block;
  font-size: .75em;
  margin: .5em 0 0;
  color: #aaa;
}

JSFiddle:https://jsfiddle.net/eznzcxfj/1/

body {
  font: 400 18px/1.4 Georgia;
}

blockquote {
  border-left: 3px solid #ccc;
  padding-left: 1em;
}

blockquote:after {
  content: "Use Ctrl+C to copy the text";
  display: block;
  font-size: .75em;
  margin: .5em 0 0;
  color: #aaa;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet aliquet facilisis. Duis sed lacinia erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam semper, enim vitae semper dictum, turpis
  dolor dictum risus, nec posuere nulla libero quis nibh. Etiam tristique, orci sit amet finibus ornare, justo mi convallis velit, vitae vehicula risus est quis justo. Sed mollis pellentesque sem ac interdum. Quisque non convallis arcu. Cras arcu justo,
  pharetra sed mattis quis, tempor vitae quam.
</p>

<blockquote>Aenean sit amet lobortis leo, in euismod diam. Donec placerat non augue quis finibus. Integer ligula magna, porttitor at libero eget, hendrerit luctus sapien. Curabitur laoreet neque arcu, dictum molestie nunc sagittis non.</blockquote>

<p>
  Praesent lacinia sem non egestas fermentum. Nunc in sapien et elit congue blandit. Aenean interdum, velit ut varius dapibus, eros elit pulvinar magna, congue tincidunt massa lorem id metus. Nam vel sollicitudin ante. Nunc eu lectus orci. Donec finibus
  ultricies eros non fringilla. Donec finibus, ante vel maximus ornare, velit nibh pretium quam, et sollicitudin velit velit id eros.
</p>
<p>
  Nulla facilisi. Pellentesque tristique libero sit amet ex efficitur egestas. Etiam porta, velit sit amet consequat scelerisque, nibh augue ornare urna, nec efficitur enim dolor ut ex. Cras vel enim metus. Morbi vitae venenatis odio. Nam in ultrices quam.
  Integer ante diam, semper a egestas pharetra, bibendum vitae mi. Praesent tincidunt, ante id ullamcorper rhoncus, enim nisi consectetur ligula, eget auctor tortor dui ac risus. In varius neque auctor dui eleifend tincidunt et in libero. Proin viverra,
  lacus imperdiet posuere feugiat, eros eros molestie nunc, et euismod ligula ligula a ex. Mauris rhoncus augue vitae dui condimentum tempus pulvinar nec massa. Sed efficitur orci nec mauris molestie, ac tempus erat aliquam. Suspendisse vitae purus dolor.
  Donec porta eros ac iaculis vestibulum. Quisque convallis at eros sit amet egestas.
</p>
<p>
  Morbi quis sodales mauris, bibendum dapibus nunc. Nunc sed posuere ante, nec malesuada felis. Ut nisi mi, pellentesque nec tempor sed, porta ut enim. Donec tincidunt lacus vitae blandit tempus. Donec gravida, erat sed accumsan commodo, nulla urna fringilla
  purus, suscipit semper ipsum mauris pharetra massa. Donec congue euismod dui, ac porttitor metus tincidunt non. Aliquam ut bibendum ante, nec semper risus. Nunc sed tempor tortor, ac eleifend ante. Nunc posuere suscipit risus. Nam orci tortor, tristique
  nec sapien ac, tempus maximus mi. Ut pellentesque bibendum felis dapibus consequat. Mauris consectetur dictum nisl, vitae tristique risus egestas quis. Curabitur eu ullamcorper ex. Morbi tincidunt ipsum non mi gravida, et suscipit urna hendrerit. Vestibulum
  dignissim fermentum pharetra.
</p>
<p>
  Nunc a vulputate velit. Vestibulum sed nunc in libero placerat pharetra. Etiam vel mi sagittis, ultrices felis non, venenatis tellus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non condimentum nisl. Donec tellus turpis,
  tempus sit amet semper vitae, viverra aliquam eros. Phasellus aliquam arcu elit, eget sollicitudin arcu vulputate sit amet. Integer vel neque viverra leo tempus suscipit id porttitor nulla. Mauris efficitur aliquam lectus vitae auctor.
</p>