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

Nikos M. · Accepted Answer · 2015-04-07T13:03:29.350

2

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

edited Apr 07 '15 at 13:03

answered Apr 07 '15 at 12:58

Nikos M.

8,033
4
36
43

score 0 · Answer 2 · answered Apr 07 '15 at 13:14

You can't necessarily do this, but you can try this:

Nest the div with the arrow inside the click target:

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

Then add some CSS to the take_me_to div so that it overlaps the arrow:

.take_me_to {
    height:125px;
}

This means, when you click on the arrow, because it is nested inside the take_me_to div, it will appear to link.

https://jsfiddle.net/syhrq71z/

score 0 · Answer 3 · answered Apr 07 '15 at 13:15

You have this style in the after pseudoelement:

pointer-events: none;

Remove it, and the arrow will be clickable.

$('.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>

Linking content added with ::after

3 Answers3