如何使锚标签在没有文本的情况下可点击

Question

我正在建立一个个人网站，并通过相应的图标链接到社交媒体。 但是，该链接不可单击。

这是我的问题的JSFiddle： http : //jsfiddle.net/mufeeza/v9s7psf2/

<div class="linkedin icon"><a href="https://www.linkedin.com/in/mufeezamjad/" target="_blank"></a></div>
<div class="github icon"><a href="https://www.github.com/mufeez-amjad" target="_blank"></a></div>
<div class="instagram icon"><a href="http://www.instagram.com/mufeez.a" target="_blank"></a></div>
<div class="twitter icon"><a href="https://www.twitter.com/mufeeza_" target="_blank"></a></div>


.icon {
    background-color: #363636;
    background-repeat: no-repeat;
    background-position: center center;
    height: 50px;
    width: 50px;
    -webkit-transition: background-color 0.4s ease;
    -moz-transition: background-color 0.4s ease;
    -ms-transition: background-color 0.4s ease;
    -o-transition: background-color 0.4s ease;
    transition: background-color 0.4s ease;
}

.icon a {
    height: 100%;
    width: 100%;
}
.facebook {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iLTAuNyAtMC42IDEzNCAyNzgiPjxzdHlsZT4uc3R5bGUwe2ZpbGw6CSNGRkZGRkY7fTwvc3R5bGU+PHBhdGggZD0iTTgyLjYgNThjMCAwLTAuNy01LjUgNC40LTkuNmM1LjEtNCA5LjktMy43IDkuOS0zLjdjMTIuOS0xLjYgMjkuOCAyLjYgMjkuOCAyLjZsNS45LTQyLjdjMCAwLTU5LjctMTQuMy04NS45IDcuMkMyOS41IDI0LjUgMjkuMyA0My43IDI5LjMgNDMuN3Y0Ny43SDAuMmwtMC4yIDQyaDI5LjRsLTEuMSAxNDMuMWw1Mi44IDAuM2wwLjMtMTQzLjRoNDMuMWwyLjktNDEuOWwtNDUuMS0wLjJMODIuNiA1OHoiIGNsYXNzPSJzdHlsZTAiLz48L3N2Zz4=);
    background-size: 25%;
}
.facebook:hover {
    background-color: #3664A2;
}

Answer 1

你想围绕整个DIV a是点击，使用display:inline-block

.icon a {
  height: 100%;
  width: 100%;
  display: inline-block;
}

Answer 2

通过添加display:block对CSS进行以下更改

.icon a {
    height: 100%;
    width: 100%;
    display: block;
}

Answer 3

您可以使用CSS :before伪元素:before ，将content属性设置为attr()函数，并将参数设置为HTML的data-*属性

<div class="linkedin icon"><a href="https://www.linkedin.com/in/mufeezamjad/" target="_blank" data-link="linkedin"></a></div>
<div class="github icon"><a href="https://www.github.com/mufeez-amjad" target="_blank" data-link="github"></a></div>
<div class="instagram icon"><a href="http://www.instagram.com/mufeez.a" target="_blank" data-link="instagram"></a></div>
<div class="twitter icon"><a href="https://www.twitter.com/mufeeza_" target="_blank" data-link="twitter"></a></div>

a:before {
  content:attr(data-link);
}

jsfiddle https://jsfiddle.net/99ksjh9g/

使用CSS :before伪元素（将content设置为url()将data URL作为参数传递

 .icon { background-color: #363636; background-repeat: no-repeat; background-position: center center; height: 50px; width: 50px; -webkit-transition: background-color 0.4s ease; -moz-transition: background-color 0.4s ease; -ms-transition: background-color 0.4s ease; -o-transition: background-color 0.4s ease; transition: background-color 0.4s ease; } .icon a { height: 100%; width: 100%; background-size: 100% 100%; display: block; } .facebook a:before { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iLTAuNyAtMC42IDEzNCAyNzgiPjxzdHlsZT4uc3R5bGUwe2ZpbGw6CSNGRkZGRkY7fTwvc3R5bGU+PHBhdGggZD0iTTgyLjYgNThjMCAwLTAuNy01LjUgNC40LTkuNmM1LjEtNCA5LjktMy43IDkuOS0zLjdjMTIuOS0xLjYgMjkuOCAyLjYgMjkuOCAyLjZsNS45LTQyLjdjMCAwLTU5LjctMTQuMy04NS45IDcuMkMyOS41IDI0LjUgMjkuMyA0My43IDI5LjMgNDMuN3Y0Ny43SDAuMmwtMC4yIDQyaDI5LjRsLTEuMSAxNDMuMWw1Mi44IDAuM2wwLjMtMTQzLjRoNDMuMWwyLjktNDEuOWwtNDUuMS0wLjJMODIuNiA1OHoiIGNsYXNzPSJzdHlsZTAiLz48L3N2Zz4=); } .facebook:hover { background-color: #3664A2; } .twitter a:before, .linkedin a:before, .instagram a:before, .github a:before, .facebook a:before { display: block; position: relative; transform: scale(.5, .5); } .twitter a:before { top: -10px; content: url(data:image/svg+xml;base64,==); } .twitter:hover { background-color: #44C8F5; } .linkedin a:before { content: url(data:image/svg+xml;base64,==); } .linkedin:hover { background-color: #007BB6; } .instagram a:before { content: url(data:image/svg+xml;base64,=); } .instagram:hover { background-color: #3F729B; } .github a:before { content: url(data:image/svg+xml;base64,+PC9zdmc+); } .github:hover { background-color: #6CC644; } 

 <div class="linkedin icon"> <a href="https://www.linkedin.com/in/mufeezamjad/" target="_blank"></a> </div> <div class="github icon"> <a href="https://www.github.com/mufeez-amjad" target="_blank"></a> </div> <div class="instagram icon"> <a href="http://www.instagram.com/mufeez.a" target="_blank"></a> </div> <div class="twitter icon"> <a href="https://www.twitter.com/mufeeza_" target="_blank"></a> </div> 

jsfiddle https://jsfiddle.net/99ksjh9g/2/

Answer 4

添加display: inline-block; 到.icon a以便填充其父div。

 .icon { background-color: #363636; background-repeat: no-repeat; background-position: center center; height: 50px; width: 50px; -webkit-transition: background-color 0.4s ease; -moz-transition: background-color 0.4s ease; -ms-transition: background-color 0.4s ease; -o-transition: background-color 0.4s ease; transition: background-color 0.4s ease; } .icon a { height: 100%; width: 100%; display: inline-block; } .facebook { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iLTAuNyAtMC42IDEzNCAyNzgiPjxzdHlsZT4uc3R5bGUwe2ZpbGw6CSNGRkZGRkY7fTwvc3R5bGU+PHBhdGggZD0iTTgyLjYgNThjMCAwLTAuNy01LjUgNC40LTkuNmM1LjEtNCA5LjktMy43IDkuOS0zLjdjMTIuOS0xLjYgMjkuOCAyLjYgMjkuOCAyLjZsNS45LTQyLjdjMCAwLTU5LjctMTQuMy04NS45IDcuMkMyOS41IDI0LjUgMjkuMyA0My43IDI5LjMgNDMuN3Y0Ny43SDAuMmwtMC4yIDQyaDI5LjRsLTEuMSAxNDMuMWw1Mi44IDAuM2wwLjMtMTQzLjRoNDMuMWwyLjktNDEuOWwtNDUuMS0wLjJMODIuNiA1OHoiIGNsYXNzPSJzdHlsZTAiLz48L3N2Zz4=); background-size: 25%; } .facebook:hover { background-color: #3664A2; } .twitter { background-image: url(data:image/svg+xml;base64,==); background-size: 40%; } .twitter:hover { background-color: #44C8F5; } .linkedin { background-image: url(data:image/svg+xml;base64,==); background-size: 50%; } .linkedin:hover { background-color: #007BB6; } .instagram { background-image: url(data:image/svg+xml;base64,=); background-size: 55%; } .instagram:hover { background-color: #3F729B; } .github { background-image: url(data:image/svg+xml;base64,+PC9zdmc+); background-size: 60%; } .github:hover { background-color: #6CC644; } 

 <div class="linkedin icon"> <a href="https://www.linkedin.com/in/mufeezamjad/" target="_blank"></a> </div> <div class="github icon"> <a href="https://www.github.com/mufeez-amjad" target="_blank"></a> </div> <div class="instagram icon"> <a href="http://www.instagram.com/mufeez.a" target="_blank"></a> </div> <div class="twitter icon"> <a href="https://www.twitter.com/mufeeza_" target="_blank"></a> </div>