Q&A
擬似要素の位置を一定の間隔にしたく、%で指定しているのですが、ブラウザの幅を変えると、位置がズレていってしまい困っています。具体的には、以下の画像のような形です。
デフォルト時：
ブラウザの幅を変えた時：
画像のように、「あのね明日は何曜日」という文言の前後に、斜めの線を配置しているのですが、前の方のbeforeで指定した方は
ブラウザを動かしても一定の間隔がkeepできているのですが、afterで指定した後ろの「/」の方だけ、なぜか間隔が広がってしまいます。
ちなみにコードはこちらです。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>position</title> 8 <link rel="stylesheet" href="styles.css"> 9</head> 10<body> 11 12 <section> 13 <div class="container"> 14 <h2 class="heading">あのね明日は何曜日</h2> 15 </div> 16 </section> 17 18</body> 19</html>
CSS
1 2.container { 3 max-width: 1002px; 4 width: calc( 1002 / 1280 * 100% ); 5 margin: 0 auto; 6} 7 8.heading { 9 font-size: calc(100/1280*80vw); 10 padding-left: calc( 84 / 1002 * 100% ); 11 padding-bottom: calc( 106 / 1002 * 100%); 12 position: relative; 13} 14 15.heading:before, .heading:after { 16 content: ''; 17 position: absolute; 18 border-radius: 11px; 19} 20 21.heading:before { 22 top: 5%; 23 height: 51%; 24 border-left: solid min( calc( 100 / 1280 * 14vw ), 14px); 25 left: calc( 23 / 1002 * 100% ); 26 transform: rotate(-32.2deg); 27} 28 29.heading:after { 30 top: 10.4%; 31 height: 51%; 32 border-right: solid min( calc( 100 / 1280 * 14vw ), 14px); 33 right: calc( 21 / 1002 * 100% ); 34 transform: rotate(30deg); 35}
どなたか原因・解決方法を教えていただけないでしょうか？？
大変恐れ入りますが、どうかよろしくお願いいたしますm m
回答1件
0
ベストアンサー
.heading幅が
.headingの中に入っている文字の幅ではなく
.containerまで広がってるはずですので
right:0の位置が想定と違うのではないでしょうか。
以下の記述を追加してみるとどうでしょうか？
css
1.heading { 2 display:inline-block; 3 padding-right: calc( 84 / 1002 * 100% );
投稿2022/01/11 15:12
総合スコア1126
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/11 17:14