Linking content added with ::after

Question

I have a div with some pseudo content. I need to be able to link that content - but can't figure out how. Here is the markup:

<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>

And here is the 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; 
 }

And here is the jQuery I use to link the button (except the bottom arrow, don't know how to do that).

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

Here is a Fiddle. I need to be able to link that bottom arrow. Thanks

Answer 1

you cannot do that, as it is not available in javascript nor html, use another dummy element which can indeed be linked

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/