<ul class="card">
<li class="card__container">
<div class="card__box">
<p>内容</p>
<a href="#" class="card__link">
リンクボタン
</a>
</div>
</li>
<li class="card__container">
<div class="card__box">
<p>内容</p>
<a href="#" class="card__link">
リンクボタン
</a>
</div>
</li>
</ul>
ul,li {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.card {
margin-top: 50px;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 40px;
}
.card__container {
border-radius: 20px;
background: #fff;
border: 1px solid #ccc;
position: relative;
}
.card__box {
margin: 0;
padding: 5px 10px;
}
.card__link::before {
position: absolute;
inset: 0;
pointer-events: auto;
content: "";
}
.card__link:hover {
text-decoration: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.