【CSS】別窓アイコンをテキストの横に表示する方法

テキストリンクの横に別窓アイコンを表示する実装を最近よく見るので、備忘録としてまとめることにしました。

【CSS】別窓アイコンをテキストの横に表示する方法

デモはこちら。

See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.

HTML

<div class="list">
    <a href="" class="item" target="_blank">
        <figure>
            <img src="https://yujiromx.com/wp-content/uploads/2023/07/home-office-54583_1280.jpg" alt="" width="" height="" loading="lazy">
        </figure>
        <h2 class="title">タイトルが入ります。</h2>
        <div class="tags">
            <span class="tag">ダミータグ</span>
            <span class="tag">ダミータグ</span>
            <span class="tag">ダミータグ</span>
            <span class="tag">ダミータグ</span>
            <span class="tag">ダミータグ</span>
        </div>
        <div class="bottom">
            <span class="location">#大田区</span>
            <div class="link">
                <span>詳しく見る</span>
            </div>
        </div>
    </a>
</div>

CSS

.list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 20px;
}

.list .item {
  display: block;
  max-width: 300px;
}

.list .item .title {
  font-size: 2rem;
  font-weight: bold;
  margin-top: 25px;
}

.list .item .tags {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 8px;
  margin-top: 15px;
}

.list .item .tags .tag {
  display: inline-block;
  font-size: 1.2rem;
  border: 1px solid #171717;
  border-radius: 9999px;
  background: #fff;
  padding: 4px 8px;
}

.list .item .bottom {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  border-top: 1px dashed;
  padding: 24px 0 0;
  margin: 24px 0 0;
  font-size: 1.4rem;
}

.list .item .bottom .location {
  color: #999;
}

.list .item .bottom .link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.list .item .bottom .link::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url(https://yujiromx.com/wp-content/uploads/2023/07/anothor.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 0 0 8px;
}

.list .item .bottom .link span {
  background: -webkit-gradient(linear, left top, left bottom, from(#171717), to(#171717)) 0 100%/0 1px no-repeat;
  background: -webkit-linear-gradient(#171717, #171717) 0 100%/0 1px no-repeat;
  background: linear-gradient(#171717, #171717) 0 100%/0 1px no-repeat;
  -webkit-transition: background .3s;
  transition: background .3s;
}