My challenge is creating a list where only the text within each link is clickable, not the entire link. I'm struggling with applying display: block to the anchor while keeping its existing display: table-cell property.
You can view my problem and experiment with your solution here: http://jsfiddle.net/kma_999/v0xkk587/
Thank you in advance!
HTML:
<div class="pane-content">
<ul>
<li><a href="#">Kostenkontrolle (Mobile)</a></li>
<li><a href="#">Sunrise Rechnung</a></li>
<li><a href="#">Umzug</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">Telefonieren im Ausland (Roaming)</a></li>
</ul>
</div>CSS:
ul {
border: 1px solid lightgray;
padding-left: 0px;
}
ul li {
border-bottom: 1px solid lightgray;
list-style: none outside none;
margin-left: 20px;
margin-right: 20px;
vertical-align: middle;
}
ul li:last-child{
border-bottom: 0px solid black;
}
ul li a {
display: table-cell;
height: 75px;
vertical-align: middle;
padding-left: 20px;
color: black;
width: 100%;
}
ul li a:hover{
color: black;
text-decoration: none;
}
ul li a:after {
content: "\25b6";
font-size: 10px;
position: absolute;
right: 33px;
}