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

CSS

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

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

デモはこちら。

HTML

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.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;
}
.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; }
.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;
}