今回は、CSSで文字の下に線を引く方法を１つ書いていきます。
下線をつけたいテキストに、疑似要素beforeを使います。
CSSで文字の下に線を入れるのは、border-bottomで指定すれば
線を入れることができます。
ただ線の太さや色の指定はできるが、長さの指定はこの方法では
出来ません。
なので、要素のサイズに合わせた長さになります。
今回、下記のようなテキストの下にサイズの短い線を入れたいと
思い探してたら、あったのでその方法になります。
方法は疑似要素のbeforeを使えば簡単に出来ます。
是非マスターしてください。
実際に書いたコード公開
上記の画像の場合に書いたコード
HTML
|
1 2 3 4 5 6 |
<body> <div class="m-titlebox"> <img class="m-img" src="./images/logoc.png" alt=""> <h2 class="m-h2">事業内容</h2><!-- /.m-h2 --> </div><!-- /.m-titlebox --> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
* { margin: 0; padding: 0; box-sizing: border-box; } .m-titlebox { max-width: 145px; margin: auto; margin-bottom: 100px; text-align: center; } .m-img { width: 100%; object-fit: cover; } .m-h2 { position: relative; display: inline-block; margin-bottom: 5px; font-size: 36px; font-weight: 500; color: #000000; } .m-h2::before { content: ''; position: absolute; left: 50%; /*線の位置 bottomで下線 topで上線*/ bottom: -3px; display: inline-block; /*線の横の長さ*/ width: 60%; /*線の太さ*/ height: 5px; /*センターの位置調整*/ -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #275B0D; border-radius: 2px; } |
このコードで、
left: 50%;
transform: translateX(-50%);で左右中央
/*線の横の長さ*/ width: 60%;
で横幅の設定が可能になります。
/*線の太さ*/ height: 5px;
で線の縦幅のせっていが可能になります。
/*線の位置 bottomで下線 topで上線*/ bottom: -3px;
このコードでは、線の配置を文字の上にするか下にするかの指定。
topで文字の上 bottomで文字の下に配置可能。
この線の長さと配置の設定変更したのはこちらになります。
線の長さを90％に変更
これで、文字の横幅に対して90％のサイズになります。
書いたコード。HTMLは変更なし
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
* { margin: 0; padding: 0; box-sizing: border-box; } .m-titlebox { max-width: 145px; margin: auto; margin-bottom: 100px; text-align: center; } .m-img { width: 100%; object-fit: cover; } .m-h2 { position: relative; display: inline-block; margin-bottom: 5px; font-size: 36px; font-weight: 500; color: #000000; } .m-h2::before { content: ''; position: absolute; left: 50%; /*線の位置 bottomで下線 topで上線*/ bottom: -3px; display: inline-block; /*線の横の長さ*/ width: 90%; /*←ここ変更してる*/ /*線の太さ*/ height: 5px; /*センターの位置調整*/ -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #275B0D; border-radius: 2px; } |
線に配置を文字の上に変更
この指定で数値を-指定すると、文字から離れていきます。
今回は、top: -3px;に変更したので。文字から3px上に配置されます。
書いたコード。HTMLは変更なし
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
* { margin: 0; padding: 0; box-sizing: border-box; } .m-titlebox { max-width: 145px; margin: auto; margin-bottom: 100px; text-align: center; } .m-img { width: 100%; object-fit: cover; } .m-h2 { position: relative; display: inline-block; margin-bottom: 5px; font-size: 36px; font-weight: 500; color: #000000; } .m-h2::before { content: ''; position: absolute; left: 50%; /*線の位置 bottomで下線 topで上線*/ top: -3px; /*←ここ変更してる*/ display: inline-block; /*線の横の長さ*/ width: 60%; /*線の太さ*/ height: 5px; /*センターの位置調整*/ -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #275B0D; border-radius: 2px; } |
最後に、この記事見てるあなたは、独学中ですか？
私も最初は、独学でやろうとしました、プログラミング
を独学はちょっとしんどい。。。
私のだした結論は、お金出して学ぼうでした。
独学で時間かけるよりも、お金出して、早くマスター
して、早く収益を上げれるようにした方がいいと思いました。
高単価案件が最短二日で決まる！フリーランスエンジニア案件情報サイト【ポテパンフリーランス】
テキストの下線長さ変更テキストの下線長さ変更サンプルコード付き書籍
コメント