如何使文本自动出现在HTML页面中的所有块引号之后

How to make a text appears after all blockquote in a HTML page automatically?

本文关键字：之后 文本 何使 HTML      更新时间：2023-09-26

我有一个blogspot网站。但我遇到了一个模仿的问题。有些人从我的博客中窃取内容。在我的网站看来，这是不合法的。我用javascript禁用了右键单击，用CSS禁用了内容选择。但是有些内容是开源的。我想让一个文本出现在块引号标记后面，比如"使用Ctrl+C从块引号复制以下文本"，这可能吗？

您可以使用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>

您可以使用jquery after函数。示例

$("blockquote").after("Use Ctrl+C to Copy the following text from the blockquote");
blockquote {
    background-color: #ccc;
    border-left: 5px solid gray;
    padding: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<blockquote><p>Here is you blockquote content</p></blockquote>
<blockquote><p>Here is you blockquote content  2</p></blockquote>

如果你不想使用JavaScript，也不在乎谷歌无法阅读"使用Ctrl+C从块引号中复制以下文本"文本，你可以在CSS中使用after元素，比如：

blockquote:after
{
  font-size: 80%;
  content:'Use Ctrl+C to Copy the following text from the blockquote';
}
<blockquote cite="http://www.example.com">
  <p>This is a cite.</p>
</blockquote>

相关文章：