鏈接添加了:: after的內容

Question

我有一個帶有一些偽內容的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')
});

這是一個小提琴 。 我需要能夠鏈接那個底部箭頭。 謝謝

Answer 1

你不能這樣做，因為它在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/

Answer 2

你不一定能這樣做，但你可以試試這個：

將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_to div中添加一些CSS，使其與箭頭重疊：

.take_me_to {
    height:125px;
}

這意味着，當您單擊箭頭時，因為它嵌套在take_me_to div中，它將顯示為鏈接。

https://jsfiddle.net/syhrq71z/

Answer 3

你after偽元素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>