【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;
}

関連記事:

【CSS】display: flex;とmargin: auto;を使って要素の高さを揃える方法 【CSS】高さの違う画像を揃える方法 【CSS】擬似要素でパンくずリストを作成する方法 【CSS】背景画像の上に薄い背景色を敷く方法