如何在不修改 HTML 的情况下在 jQuery 中添加指向伪元素的链接？ - 更新 > Functions.php答案

【问题标题】：How add a link to a pseudo element in jQuery without modifying HTML? - Updated > Functions.php如何在不修改 HTML 的情况下在 jQuery 中添加指向伪元素的链接？ - 更新 > Functions.php
【发布时间】：2019-12-29 21:11:22
【问题描述】：

我正在尝试将 url 分配给 h1 旁边的伪元素 (button)。我正在处理一个我无法修改的特定 WordPress 页面，因为 h1 是 entry-title。

问题是我不能使用h1.entry-title::after 来分配链接。有人可以帮帮我吗？

var $j = jQuery.noConflict();

$j(document).ready(function() {
  $j("h1.entry-title::after").click(function() {
    window.open('http://www.google.com/');
  });
});

#pageid1 h1.entry-title::after {
  content: 'contact Yes Link';
  right: 80px;
  position: absolute;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  padding: 0px 13px;
  background-color: #95c11e;
  box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
  -webkit-box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
  -moz-box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pageid1">
  <h1 class="entry-title"> Title Page - No Link </h1>
</div>

【问题讨论】：

您不能将链接分配给伪元素。伪元素不能转换为链接，它们不能有事件监听器
如果您能够添加 wordpress action，那么只需在 h1 中添加 real 链接
我试过了，但它不起作用，反正我不是 php 开发人员和开发人员。 Customizr主题并不回答我的问题。 add_action ('__before_archive_title', 'button_beside_title'); function button_beside_title() { if ( !is_page( array( '3154' ) ) ){ echo 'Text Example'; }}
如果您想获得帮助或在 wordpress stackexchange 中提问，请添加 wordpress 和 php 标签……实际上，您的问题不会使用 CSS/jQuery 得到任何解决方案。它很快就会被关闭作为重复 span>
谢谢 Temani，我不想要链接 H1，但只想要按钮，我做了这个动作 ``` add_action ('__before_archive_title', 'button_link');函数 button_link ( $link ) { if ( !is_page( '3154' ) ) { $link = 'website.com'; }} ``` 鼠标箭头可以看到链接，但是 url 不起作用。我做错了什么？

标签： php jquery css wordpress function

【解决方案1】：

您可以使用 javascript 获取伪内容并将链接附加到 H1。

这是 CSS 代码：

/* Add pseudo at first */
#pageid1 h1.entry-title::after {
   content: 'contact Yes Link';
   right: 80px;
   position: absolute;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   color: #fff;
   font-size: 28px;
   font-weight: 600;
   padding: 0px 13px;
   background-color: #95c11e;
   box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
   -webkit-box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
   -moz-box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
}

/* Remove pseudo */
#pageid1 h1.entry-title.pseudoed::after {
   display: none;
}

/* Style your link like pseudo */
#pageid1 h1.entry-title .my-pseudo-link {
   right: 80px;
   position: absolute;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   color: #fff;
   font-size: 28px;
   font-weight: 600;
   padding: 0px 13px;
   background-color: #95c11e;
   box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
   -webkit-box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
   -moz-box-shadow: 10px 10px 17px 1px rgba(0, 0, 0, .23);
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
}

这里是 JS/jQuery 代码：

var $j = jQuery.noConflict();

$j(document).ready(function() {
   var pseudoLink = $j('<a href="https://google.com"></a>').html(window.getComputedStyle(document.querySelector('#pageid1 h1.entry-title'), ':after').getPropertyValue('content'));
   $j('#pageid1 h1.entry-title').addClass('pseudoed').append(pseudoContent);
});

【讨论】：