position:absolute使う場合
- 表示例
- 見出しサンプルＡ
- HTML
- <div class="headline01">見出しサンプルＡ</div>
- CSS
- div.headline01{
- position:relative;
- padding:8px 0 8px 0;border-bottom:solid 1px rgb(199,199,199);
- font-size:medium;font-weight:bold;
- }
- div.headline01::after{
- content:"";position:absolute;display:block;
- width:92px;padding:8px 0 0 0;border-bottom:solid 1px rgb(37,37,37);
- }
- ボーダーの下線を重ねる方法で、グレーの下線の上に長さ92pxの黒色の下線を重ねて表示しています。
線の太さ：1px
黒色の線の長さ：92px
文字と線の余白：8px
linear-gradient使う場合
- 表示例
- 見出しサンプルＢ
- HTML
- <div class="headline02">見出しサンプルＢ</div>
- CSS
- div.headline02{
- padding:8px 0 0 0;
- font-size:medium;font-weight:bold;
- }
- div.headline02::after{
- content:"";display:block;
- height:1px;margin:8px 0 0 0;
- background:linear-gradient(90deg,rgb(37,37,37) 0%,rgb(37,37,37) 15%,rgb(199,199,199) 15%,rgb(199,199,199) 100%);
- }
- 背景色を途中で切り替える方法で、左端から15%までが黒色で、それ以降はグレーの背景色を表示しています。
線の太さ：1px
黒色の線の長さ：15%
文字と線の余白：8px
background-image使う場合
- 表示例
- 見出しサンプルＣ
- HTML
- <div class="headline03">見出しサンプルＣ</div>
- CSS
- div.headline03{
- padding:8px 0 0 0;
- font-size:medium;font-weight:bold;
- }
- div.headline03::after{
- content:"";display:block;
- height:1px;margin:8px 0 0 0;
- background-color:rgb(199,199,199);
- background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAMSURBVBhXY1BVVQUAAOIAcJ8qlFwAAAAASUVORK5CYII=");
- background-position:left center;background-repeat:no-repeat;background-size:92px 1px;
- }
- 背景色を重ねる方法で、グレーの背景色の上に長さ92pxの黒色の画像の背景色を重ねて表示しています。縦横1pxの黒い画像を縦1px横92pxに伸ばしています。
線の太さ：1px
黒色の線の長さ：92px
文字と線の余白：8px
