次は、アイコンの上にマウスの矢印をのせると線を引くアイコンをHTMLとCSSを使ってする方法をします。
アイコンに線を引くアニメーションHTMLとCSSを使ってする方法
ワードプレスの管理画面を開きます。
左上の「投稿」を押します。
左上の「新規追加」を押します。
左上の「タイトルを追加」に「アイコンに線を引くアニメーションHTMLとCSSを使ってする方法」と入力します。
右側の「テキスト」を押します。
テキストのところにコードを貼り付けます。
テキストのところに下記のコードをコピーして、貼り付けます。
<div class="sen-hiku-icon1"> 続きを見る </div>
貼り付けました。
右側の「公開」を押します。
「OK」を押します。
右上の「変更をプレビュー」を押します。
「アイコンに線を引くアニメーションHTMLとCSSを使ってする方法」の
アイコンの上にマウスの矢印をのせるとアイコンに線を引くことを確認します。
↑じょうまさふみに学習状況を報告すると喜びます(^^)/
HTMLとCSSの説明
CSS
/*アイコンに線を引くアニメーション（基本）*/
.sen-hiku-icon1 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.5em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
line-height: 1; /*行の高さ*/
}
/*アイコン表示*/
.sen-hiku-icon1:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f013"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 5px; /*アイコンの右側の余白*/
color: blue;/*アイコンの色*/
}
/*線を非表示*/
.sen-hiku-icon1:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 3px solid black; /*下線*/
padding-bottom: 0.5em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-icon1:hover:after {
width: 100%; /*横幅*/
border-bottom: 3px solid black; /*下線*/
}
HTML
<div class="sen-hiku-icon1"> 続きを見る </div>
「font-size: 1.5em;」は、文字のサイズを指定するためのCSSコードです。
「font-weight: bold;」は、文字を太字にするためのCSSコードです。
「margin: 0 0 0.5em 0;」は、文字の下側の余白を指定するためのCSSコードです。
「text-decoration: none;」は、文字の装飾をなしにするためのCSSコードです。
「color: black;」は、文字の色を指定するためのCSSコードです。
「display: inline-block;」は、文字から下線がはみ出ないようにするためのCSSコードです。
「line-height: 1;」は、文字の行の高さを指定するためのCSSコードです。
「font-family」は、アイコンのフォントの設定をするCSSコードです。
「content: "\f013";」の、「f013」は、アイコンの種類を設定するCSSコードです。
「f013」を変えると別のアイコンを表示させることができます。
「font-weight: bold;」の、「bold」は、太字にするためのCSSコードです。
「padding-right: 5px;」は、アイコンの右側の余白を設定するCSSコードです。
「color: blue;」は、アイコンの色を設定するCSSコードです。
「content: '';」は、下線を表示するためのCSSコードです。
「width: 0;」は、マウスの矢印を文字にのせてないときに、線を非表示にするためのCSSコードです。
「-ms-transition: all 0.3s ease;」は、下線が表示される時間を指定するためのCSSコードです
「-ms-transition」の、「-ms-」は、ブラウザーのインターネットエクスプロラーで表示させるためのコードです。
「-webkit-transition: all 0.3s ease;」は、下線が表示される時間を指定するためのCSSコードです
「webkit-transition」の、「-webkit-」は、ブラウザーのグーグルクロームとサファリで表示させるためのコードです。
「transition: all 0.3s ease;」は、下線が表示される時間を指定するためのCSSコードです。
「border-bottom: 3px solid black;」は、下線の幅と色を指定するためのCSSコードです。
「padding-bottom: 0.5em;」は、文字と下線の余白を指定するためのCSSコードです。
「display: block;」は、下線の位置を固定するためのCSSコードです。
「sen-hiku-icon1:hover:after」の「width: 100%;」は、マウスの矢印を文字にのせたときに、下線を幅100%で表示するためのCSSコードです。
アイコンの変更方法
アイコンの変更方法を教えます。
下記のサイトを開きます。
↓
https://fontawesome.com/v4.7.0/icons/
少し下へ移動します。
好きな「アイコン」を押します。
ここの４ケタの「f1b9」をコピーします。
ワードプレスの管理画面を開きます。
左側の「外観」を押します。
左側の「カスタムCSS」を押します。
これをCSSコードの「content」の中に貼り付けます。
一番下の「カスタムCSSの更新」を押します。
左上の「サイトを表示」を押します。
「アイコンの色を変えるHTMLとCSSを使ってする方法」の記事を押します。
アイコンが変更されていることを確認します。
アイコンに線を引くアニメーション記入例
アイコンに線を引くアニメーション（基本）
CSS
/*アイコンに線を引くアニメーション（基本）*/
.sen-hiku-icon1 {
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.5em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
line-height: 1; /*行の高さ*/
}
/*アイコン表示*/
.sen-hiku-icon1:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f013"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 5px; /*アイコンの右側の余白*/
color: blue;/*アイコンの色*/
}
/*線を非表示*/
.sen-hiku-icon1:after {
content: ''; /*線の表示*/
width: 0; /*幅ゼロ*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 3px solid black; /*下線*/
padding-bottom: 0.5em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-icon1:hover:after {
width: 100%; /*横幅*/
border-bottom: 3px solid black; /*下線*/
}
HTML
<div class="sen-hiku-icon1"> 続きを見る </div>「続きを見る」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
アイコンに線を引くアニメーション（二重線）
CSS
/*アイコンに線を引くアニメーション（二重線）*/
.sen-hiku-icon2 {
position: relative; /*相対配置*/
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 1em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
line-height: 1; /*行の高さ*/
}
/*アイコン表示*/
.sen-hiku-icon2:after {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f15b"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 5px; /*アイコンの右側の余白*/
color: blue;/*アイコンの色*/
}
/*線を非表示*/
.sen-hiku-icon2:before {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 10px double blue; /*二重線*/
padding-bottom: 1.5em; /*文字と下線の余白*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-icon2:hover:before {
width: 100%; /*横幅*/
border-bottom: 10px double blue; /*二重線*/
}
HTML
<div class="sen-hiku-icon2"> 続きを見る </div>「続きを見る」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
アイコンに線を引くアニメーション（点線）
CSS
/*アイコンに線を引くアニメーション（点線）*/
.sen-hiku-icon3 {
position: relative; /*相対配置*/
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.5em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
border: solid 2px black; /*枠線*/
padding-right: 10px; /*アイコンの右側の余白*/
}
/*アイコン表示*/
.sen-hiku-icon3:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f00c"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue;/*アイコンの色*/
}
/*線を非表示*/
.sen-hiku-icon3:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
bottom: 10%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
border-bottom: 5px dotted aqua; /*下線*/
display: block; /*表示位置*/
}
/*線を表示*/
.sen-hiku-icon3:hover:after {
width: 100%; /*線の横幅*/
border-bottom: 5px dotted aqua; /*下線*/
}
HTML
<div class="sen-hiku-icon3"> 続きを見る </div>「続きを見る」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
アイコンに線を引くアニメーション（マーカー線）
CSS
/*アイコンに線を引くアニメーション（マーカー線）*/
.sen-hiku-icon4 {
position: relative; /*相対配置*/
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.5em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
border: solid 2px black; /*枠線*/
padding-right: 10px; /*アイコンの右側の余白*/
background: yellow; /*背景色*/
}
/*アイコン表示*/
.sen-hiku-icon4:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f2b6"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue;/*アイコンの色*/
}
/*線を非表示*/
.sen-hiku-icon4:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 0; /*線の始まり位置*/
bottom: 0; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, red 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 1em; /*線の縦幅*/
}
/*線を表示*/
.sen-hiku-icon4:hover:after {
width: 100%; /*線の横幅*/
background: linear-gradient(transparent 0%, red 100%); /*マーカー線*/
}
HTML
<div class="sen-hiku-icon4"> 続きを見る </div>「続きを見る」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
アイコンに線を引くアニメーション（右から線）
CSS
/*アイコンに線を引くアニメーション（右から線）*/
.sen-hiku-icon5 {
position: relative; /*相対配置*/
font-size: 1.5em; /*文字サイズ*/
font-weight: bold; /*太字*/
margin: 0 0 0.5em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: black; /*文字色*/
display: inline-block; /*要素内表示*/
border: solid 2px #b6ddff; /*枠線*/
padding-right: 10px; /*アイコンの右側の余白*/
background-image: linear-gradient(#fff 0%, #00cfff 100%); /*グラデーション*/
}
/*アイコン表示*/
.sen-hiku-icon5:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f0c9"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue;/*アイコンの色*/
}
/*線を非表示*/
.sen-hiku-icon5:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
right: 0; /*線の始まり位置*/
bottom: 0; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, blue 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 1em; /*線の縦幅*/
}
/*線を表示*/
.sen-hiku-icon5:hover:after {
width: 100%; /*線の横幅*/
background: linear-gradient(transparent 0%, blue 100%); /*マーカー線*/
}
HTML
<div class="sen-hiku-icon5"> 続きを見る </div>「続きを見る」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
アイコンに線を引くアニメーション（中央から線）
CSS
/*アイコンに線を引くアニメーション（中央から線）*/
.sen-hiku-icon6 {
position: relative; /*相対配置*/
font-size: 1.5em; /*文字サイズ*/
margin: 0 0 0.5em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: white; /*文字色*/
display: inline-block; /*要素内表示*/
border: solid 2px #acacac; /*枠線*/
padding-right: 10px; /*アイコンの右側の余白*/
background-image: linear-gradient(white 0%, black 100%); /*グラデーション*/
}
/*文字太字*/
.sen-hiku-icon6 span{
font-weight: bold; /*太字*/
}
/*アイコン表示*/
.sen-hiku-icon6:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f02d"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: yellow;/*アイコンの色*/
}
/*右線を非表示*/
.sen-hiku-icon6 span:before {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
right: 50%; /*線の始まり位置*/
bottom: 0; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, white 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 2em; /*線の縦幅*/
}
/*右線を表示*/
.sen-hiku-icon6 span:hover:before {
width: 50%; /*線の横幅*/
background: linear-gradient(transparent 0%, white 100%); /*マーカー線*/
}
/*左線を非表示*/
.sen-hiku-icon6 span:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 50%; /*線の始まり位置*/
bottom: 0; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, white 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 2em; /*線の縦幅*/
}
/*左線を表示*/
.sen-hiku-icon6 span:hover:after {
width: 50%; /*線の横幅*/
background: linear-gradient(transparent 0%, white 100%); /*マーカー線*/
}
HTML
<div class="sen-hiku-icon6"> <span>続きを見る</span> </div>「続きを見る」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
アイコンに線を引くアニメーション（左右から線）
CSS
/*アイコンに線を引くアニメーション（左右から線）*/
.sen-hiku-icon7 {
position: relative; /*相対配置*/
font-size: 1.5em; /*文字サイズ*/
margin: 0 0 0.5em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: white; /*文字色*/
display: inline-block; /*要素内表示*/
border: solid 2px #acacac; /*枠線*/
padding-right: 10px; /*アイコンの右側の余白*/
background-image: linear-gradient(#ff7a86 0%, #e894ff 100%); /*グラデーション*/
}
/*文字太字*/
.sen-hiku-icon7 span{
font-weight: bold; /*太字*/
}
/*アイコン表示*/
.sen-hiku-icon7:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f001"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: blue;/*アイコンの色*/
}
/*右線を非表示*/
.sen-hiku-icon7 span:before {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
right: 0; /*線の始まり位置*/
bottom: 0; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, yellow 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 1em; /*線の縦幅*/
}
/*右線を表示*/
.sen-hiku-icon7 span:hover:before {
width: 50%; /*線の横幅*/
background: linear-gradient(transparent 0%, yellow 100%); /*マーカー線*/
}
/*左線を非表示*/
.sen-hiku-icon7 span:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 0; /*線の始まり位置*/
bottom: 0; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, yellow 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 1em; /*線の縦幅*/
}
/*左線を表示*/
.sen-hiku-icon7 span:hover:after {
width: 50%; /*線の横幅*/
background: linear-gradient(transparent 0%, yellow 100%); /*マーカー線*/
}
HTML
<div class="sen-hiku-icon7"> <span>続きを見る</span> </div>「続きを見る」の文字を消して、好きな文字を入れてください。
記事をプレビュー表示したとき
アイコンに線を引くアニメーション（リンク付き）
CSS
/*アイコンに線を引くアニメーション（リンク付き）*/
.sen-hiku-icon8 {
position: relative; /*相対配置*/
font-size: 1.5em; /*文字サイズ*/
margin: 0 0 0.5em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: white; /*文字色*/
display: inline-block; /*要素内表示*/
border: solid 2px aqua; /*枠線*/
padding-right: 10px; /*アイコンの右側の余白*/
background-image: linear-gradient(aqua 0%, blue 100%); /*グラデーション*/
}
/*文字太字*/
.sen-hiku-icon8 span{
font-weight: bold; /*太字*/
}
/*アイコン表示*/
.sen-hiku-icon8:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f070"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: yellow;/*アイコンの色*/
}
/*右線を非表示*/
.sen-hiku-icon8 span:before {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
right: 0; /*線の始まり位置*/
bottom: 0; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, aqua 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 1em; /*線の縦幅*/
}
/*右線を表示*/
.sen-hiku-icon8 span:hover:before {
width: 50%; /*線の横幅*/
background: linear-gradient(transparent 0%, aqua 100%); /*マーカー線*/
}
/*左線を非表示*/
.sen-hiku-icon8 span:after {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*幅ゼロ*/
left: 0; /*線の始まり位置*/
bottom: 0; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, aqua 100%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 1em; /*線の縦幅*/
}
/*左線を表示*/
.sen-hiku-icon8 span:hover:after {
width: 50%; /*線の横幅*/
background: linear-gradient(transparent 0%, aqua 100%); /*マーカー線*/
}
HTML
<a href="ここにURLリンクを入れる" rel="noopener noreferrer" target="_blank"> <div class="sen-hiku-icon8"> <span>続きを見る</span> </div> </a>「ここにURLリンクを入れる」の文字を消して、URLリンクを入れてください。
記事をプレビュー表示したとき
アイコンに線を引くアニメーション（文字だけ線）
CSS
/*アイコンに線を引くアニメーション（文字だけ線）*/
.sen-hiku-icon9 {
position: relative; /*相対配置*/
font-size: 1.5em; /*文字サイズ*/
margin: 0 0 0.5em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: white; /*文字色*/
display: inline-block; /*要素内表示*/
border: solid 2px yellow; /*枠線*/
padding-right: 10px; /*アイコンの右側の余白*/
background-image: linear-gradient(yellow 0%, black 100%); /*グラデーション*/
}
/*文字太字*/
.sen-hiku-icon9 span{
font-weight: bold; /*太字*/
}
/*アイコン表示*/
.sen-hiku-icon9:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f078"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: yellow;/*アイコンの色*/
}
/*線を非表示*/
.sen-hiku-icon9 span:before {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 0; /*横幅ゼロ*/
left: 28%; /*線の始まり位置*/
bottom: 10%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, yellow 0%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 0.2em; /*線の縦幅*/
}
/*線を表示*/
.sen-hiku-icon9 span:hover:before {
width: 65%; /*線の横幅*/
background: linear-gradient(transparent 0%, yellow 0%); /*マーカー線*/
}
HTML
<a href="ここにURLリンクを入れる" rel="noopener noreferrer" target="_blank"> <div class="sen-hiku-icon9"> <span>続きを見る</span> </div> </a>「ここにURLリンクを入れる」の文字を消して、URLリンクを入れてください。
記事をプレビュー表示したとき
アイコンに線を引くアニメーション（線を消す）
CSS
/*アイコンに線を引くアニメーション（線を消す）*/
.sen-hiku-icon10 {
position: relative; /*相対配置*/
font-size: 1.5em; /*文字サイズ*/
margin: 0 0 0.5em 0; /*文字の下余白*/
text-decoration: none; /*装飾なし*/
color: white; /*文字色*/
display: inline-block; /*要素内表示*/
border: solid 2px yellow; /*枠線*/
padding-right: 10px; /*アイコンの右側の余白*/
background-image: linear-gradient(yellow 0%, red 100%); /*グラデーション*/
}
/*文字太字*/
.sen-hiku-icon10 span{
font-weight: bold; /*太字*/
}
/*アイコン表示*/
.sen-hiku-icon10:before {
font-family: "Font Awesome 5 Free"; /*文字のフォント設定*/
content: "\f075"; /*アイコンの種類*/
font-weight: bold; /*太字*/
padding-right: 10px; /*アイコンの右側の余白*/
padding-left: 10px; /*アイコンの左側の余白*/
color: yellow;/*アイコンの色*/
}
/*線を表示*/
.sen-hiku-icon10 span:before {
content: ''; /*線の表示*/
position: absolute; /*絶対配置*/
width: 65%; /*線の横幅*/
left: 28%; /*線の始まり位置*/
bottom: 10%; /*下線の位置*/
-ms-transition: all 0.3s ease; /*下線を引く時間*/
-webkit-transition: all 0.3s ease; /*下線を引く時間*/
transition: all 0.3s ease; /*下線を引く時間*/
background: linear-gradient(transparent 0%, yellow 0%); /*マーカー線*/
display: block; /*表示位置*/
padding-bottom: 0.2em; /*線の縦幅*/
}
/*線を非表示*/
.sen-hiku-icon10 span:hover:before {
width: 0; /*横幅ゼロ*/
background: linear-gradient(transparent 0%, yellow 0%); /*マーカー線*/
}
HTML
<a href="ここにURLリンクを入れる" rel="noopener noreferrer" target="_blank"> <div class="sen-hiku-icon10"> <span>続きを見る</span> </div> </a>「ここにURLリンクを入れる」の文字を消して、URLリンクを入れてください。