아이콘 글꼴 (Font Awesome 등)을 사용하는 목록 마커를 목록 요소만으로 구현
샘플은 Font Awesome 5 사용.
그리기
코드
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<style>
body {
margin: 0;
}
.container {
width: 360px;
border: 1px solid gray;
margin: 0 auto;
}
hr {
border-width: 2px;
}
a {
outline: 1px solid gray;
}
a:hover {
background-color: yellow;
}
.sample1 {
list-style: none;
padding-left: 0;
}
.sample1 li:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f138";
margin-right: .3em;
}
.sample2 {
list-style: none;
padding-left: 0;
}
.sample2 li {
margin-left: 1.3rem; /* 追加 */
text-indent: -1.3em; /* 追加 */
}
.sample2 li:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f138";
margin-right: .3em;
}
.sample2 li {
margin-left: 1.3rem;
text-indent: -1.3em;
}
.sample2b {
list-style: none;
padding-left: 0;
}
.sample2b li:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f138";
margin-right: .3em;
margin-left: 1.3rem;
text-indent: -1.3em;
}
.sample2b li a {
display: block; /* 追加 */
}
.sample2c {
list-style: none;
padding-left: 0;
}
.sample2c li {
margin-left: 1.3rem;
text-indent: -1.3em;
}
.sample2c li a:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f138";
margin-right: .3em;
margin-left: 1.3rem;
text-indent: -1.3em;
}
.sample2c li a {
display: block; /* 追加 */
}
.sample3 {
list-style: none;
padding-left: 0;
}
.sample3 li {
position: relative;
}
.sample3 li:before {
position: absolute;
top: .25em;
left: 1rem; /* 左余白 */
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f138";
}
.sample3 li a {
display: block;
padding-left: 2.3rem; /* 左余白 1rem をプラス */
}
.sample3b {
list-style: none;
padding-left: 0;
}
.sample3b li {
position: relative;
}
.sample3b li a {padding-left: 1.3rem;
display: block;
padding-left: 2.3rem; /* 左余白 1rem をプラス */
}
.sample3b li a:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f138";
}
</style>
</head>
<body>
<div class="container">
<h2>sample 1</h2>
<p>改行が入ると2行目以降がリストマーカーの頭と揃い格好悪い</p>
<ul class="sample1">
<li><a href="#">りんご</a></li>
<li><a href="#">ばなな</a></li>
<li><a href="#">長くて改行が<br>入った場合</a></li>
</ul>
<hr>
<h2>sample 2</h2>
<p>text-indent と マイナス左マージンで調整。幅いっぱい表示しないならこれでいい</p>
<ul class="sample2">
<li><a href="#">りんご</a></li>
<li><a href="#">ばなな</a></li>
<li><a href="#">長くて改行が<br>入った場合</a></li>
</ul>
<hr>
<h2>sample 2b</h2>
<p>スマホ表示でまず必要となる幅いっぱい表示。before 疑似要素は a 要素の内側でなく前に生成されるため、a 要素を "display: block;" でブロック要素にしてもうまくいかない</p>
<ul class="sample2b">
<li><a href="#">りんご</a></li>
<li><a href="#">ばなな</a></li>
<li><a href="#">長くて改行が<br>入った場合</a></li>
</ul>
<hr>
<h2>失敗例:sample 2b</h2>
<p>スマホ表示でまず必要となる幅いっぱい表示。before 疑似要素は a 要素の内側でなく前に生成されるため、a 要素を "display: block;" でブロック要素にしてもうまくいかない</p>
<ul class="sample2b">
<li><a href="#">りんご</a></li>
<li><a href="#">ばなな</a></li>
<li><a href="#">長くて改行が<br>入った場合</a></li>
</ul>
<hr>
<h2>sample 3</h2>
<p>a 要素を幅いっぱいに。Font Awesome アイコンを使ったリストマーカーを絶対配置で置く</p>
<ul class="sample3">
<li><a href="#">りんご</a></li>
<li><a href="#">ばなな</a></li>
<li><a href="#">長くて改行が<br>入った場合</a></li>
</ul>
<h2>失敗例:sample 3b</h2>
<p>li でなく a 要素の before 疑似要素にすると、before 疑似要素が a 要素内に位置するため、 "text-decoration: none;" を指定してもリンク線が付いてしまう。</p>
<ul class="sample3b">
<li><a href="#">りんご</a></li>
<li><a href="#">ばなな</a></li>
<li><a href="#">長くて改行が<br>入った場合</a></li>
</ul>
</div>
</body>
</html>
Reference
이 문제에 관하여(아이콘 글꼴 (Font Awesome 등)을 사용하는 목록 마커를 목록 요소만으로 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/oreo3@github/items/59ed5e44091a9abfe045텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)