CODEWITHSUNDEEP
htmlcss
rits
rits

Reputation: 1544

How to make this empty space between link text and :after clickable?

Fiddle.

If you hover mouse between the "CLOSE" and the :after element which is a triangle then you can't click the link.

Is there a way to make that area clickable and still make it look the same?

HTML:

<div class="close">
  <a href="#">Close</a>
</div>

CSS:

.close {
    margin-top: 21px;
    width: 100%;
    padding-top: 14px;
    text-align: center;
}
.close > a {
    position: relative;
    color: #000;
    font-size: 0.9375em;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}
.close > a:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 4px;
    right: -32px;
    border-bottom: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

Upvotes: 1

Views: 2121

Answers (2)

ashish singh
ashish singh

Reputation: 6904

https://jsfiddle.net/n0hs9q14/

.close {
    margin-top: 21px;
    width: 100%;
    padding-top: 14px;
    text-align: center;
}
.close > a {
    position: relative;
    color: #000;
    font-size: 0.9375em;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    background: red;
    display: inline-block; /* if vertical padding is required */
    padding: 10px 30px 10px 0;
}
.close > a:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 13px;
    right: 0;
    /*right: -32px; dont take arrow out of parent */
    border-bottom: 10px solid #000;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

what i have done is bring arrow inside the a tag by giving a some padding on right and giving right:0 to :after.. and background is just for visibility and top of :after was changed to align it vertically

Upvotes: 0

slash197
slash197

Reputation: 9034

Add display: inline-block and padding-right: 30px to a tag, change right: 0px for :after

Upvotes: 1

Related Questions