正在链接添加了以下内容::在之后

Linking content added with ::after

本文关键字：之后 链接 添加      更新时间：2023-09-26

我有一个带有一些伪内容的div。我需要能够链接这些内容，但不知道如何链接。这是标记：

<div class="container join_club">
<div class="text-center">
    <span class="title">
    <h3>Join our new service, click to...</h3>
        </span>
    <div class="col-md-4 col-md-offset-4 take_me_to">
        <div class="arrow_box_join">
            <p><a href="/enrollment" title="Click to Join">Join now</a> </p>
        </div>
    </div>
</div>
</div>

这是CSS：

.span-text {
    text-align: center;
    color: #848484;
    font-size: 15px;
    font-size: 1.5rem; }
        .span-text span {
            display: block;
            line-height: 22px; }
.join_club h3 {
    font-family: Lato;
    font-weight: normal;
    color: #F25E5E;
    font-size: 30px;
    font-size: 3rem;
    border-bottom: 1px solid #F25E5E;
    padding-bottom: 21px;
    margin-bottom: 15px; }
.arrow_box_join {
    width: 100%;
    height: 85px;
    position: relative;
    background: #F25E5E;
    font-family: Lato; }
        .arrow_box_join p {
            font-size: 35px;
            font-size: 3.5rem;
            font-weight: bold;
            margin: 0;
            padding: 0;
            height: 85px;
            line-height: 80px; }
                .arrow_box_join p > a {
                    font-weight: normal;
                    font-size: 30px;
                    font-size: 3rem;
                    line-height: 50px;
                    color: #fff;
                    text-decoration: none;
                    text-transform: uppercase; 
                    }
.arrow_box_join:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #F25E5E;
    border-width: 63px;
    border-top-width: 39px;
    margin-left: -63px; }
.arrow_box_join p:hover, .arrow_box_join p:after {
    background: #8e2e2e;
}
.arrow_box_join:hover:after {
    border-top-color: #8e2e2e;
}
.join_club {
    margin-bottom: 45px; 
 }

这是我用来链接按钮的jQuery（除了底部箭头，不知道怎么做）。

$('.take_me_to').click(function(){
    window.location.href = $(this).find('a').attr('href')
});

这是一个Fiddle。我需要能够链接底部的箭头。感谢

您不能这样做，因为它在javascript或html中都不可用，请使用另一个可以链接的伪元素

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
  2. http://nicolasgallagher.com/an-introduction-to-css-pseudo-element-hacks/
  3. https://css-tricks.com/pseudo-element-roundup/

你不一定能做到这一点，但你可以尝试一下：

将带有箭头的div嵌套在点击目标中：

<div class="container join_club">
    <div class="text-center">
        <span class="title">
        <h3>Join our new service, click to...</h3>
            </span>
        <div class="take_me_to"> <!-- Nested the arrow div inside -->
            <div class="col-md-4 col-md-offset-4">
                <div class="arrow_box_join"> 
                    <p><a href="/enrollment" title="Click to Join">Join now</a> </p>
                </div>
            </div>
        </div>
    </div>
</div>

然后在take_me_todiv中添加一些CSS，使其与箭头重叠：

.take_me_to {
    height:125px;
}

这意味着，当您单击箭头时，因为它嵌套在take_me_todiv中，所以它将显示为链接。

https://jsfiddle.net/syhrq71z/

在after伪元素中有这样的样式：

pointer-events: none;

将其移除，箭头将可单击。

$('.take_me_to').click(function(){
    window.location.href = $(this).find('a').attr('href')
});
.span-text {
  text-align: center;
  color: #848484;
  font-size: 15px;
  font-size: 1.5rem; }
  .span-text span {
    display: block;
    line-height: 22px; }
.join_club h3 {
  font-family: Lato;
  font-weight: normal;
  color: #F25E5E;
  font-size: 30px;
  font-size: 3rem;
  border-bottom: 1px solid #F25E5E;
  padding-bottom: 21px;
  margin-bottom: 15px; }
.arrow_box_join {
  width: 100%;
  height: 85px;
  position: relative;
  background: #F25E5E;
  font-family: Lato; }
  .arrow_box_join p {
    font-size: 35px;
    font-size: 3.5rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    height: 85px;
    line-height: 80px; }
    .arrow_box_join p > a {
      font-weight: normal;
      font-size: 30px;
      font-size: 3rem;
      line-height: 50px;
      color: #fff;
      text-decoration: none;
      text-transform: uppercase; }
.arrow_box_join:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  border-color: rgba(136, 183, 213, 0);
  border-top-color: #F25E5E;
  border-width: 63px;
  border-top-width: 39px;
  margin-left: -63px; }
.join_club {
  margin-bottom: 45px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container join_club">
	<div class="text-center">
		<span class="title">
		<h3>Join our new service, click to...</h3>
			</span>
        <div class="col-md-4 col-md-offset-4 take_me_to">
            <div class="arrow_box_join">
                <p><a href="/enrollment" title="Click to Join">Join now</a> </p>
            </div>
	    </div>
	</div>
</div>

相关文章：