HTML 文字の前に（before）アイコンを表示させているのですが、画面幅がかわっても正しい位置で表示させたい。

：beforeにてアイコンを表示させているのですが、画面幅がかわると正しい位置で表示できない。

htmlを練習しており、
下記画像の様に実装し、画面幅が可変しても
文字の横の位置で表示したいのですが、やり方がよくわかりません。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5<style type="text/css">
6.absolute{
7    width: 100%;
8    text-align: center;
9    font-size: 24px;
10    font-weight: bold;
11    color: #ffffff;
12}
13
14.absolute .border{
15    color: #ffffff;
16    height: 140px;
17    background-image:url(/img/bg_border.png);
18    background-repeat: repeat-x;
19}
20
21
22.absolute .border h3{
23    position: relative;
24    font-size: 30px;
25}
26
27.absolute .border h3::before {
28    position: absolute;
29    content: "";
30    display: inline-block;
31    width: 90px;
32    height: 90px;
33    background: url(/img/icon.png) no-repeat;
34    background-size: contain;
35    left: 30%;
36    top: -50px;
37}
38</style>
39</head>
40
41<body id="pagetop" class="">
42
43     <section class="absolute">
44        <div class="border">
45            <p>画面幅が変わっても</p>
46            <h3>←この画像を文字の横に浮かせたい</h3>
47        </div>
48    </section>
49 
50</body>
51
52</html>
53
54![イメージ説明](5a480ee8c2155e10a84b7756034320b0.png)
55念のため画像付属します。
56![bg_border](b66033e449336ea873200465b40b7e65.png)
57![icon](5beca0d7cb05a0124960d3d1996e2d28.png)
58
59transform: translate?
60で上手くできるかと思ったのですが良い記載方法がわからなく困っております。
61
62正しく実装できる方法などありましたら
63ご教授お願いします。
64またこの他にも適切な表示方法がありましたら、勉強になるため教えていただけたら幸いです。

行動規範の内容に同意します

回答2件

ベストアンサー

下記のような感じでどうでしょうか。

h3をインラインブロックに変換することで幅をテキスト幅に合わせて中央寄せ。

既定のマージン分ずれるので0にリセット。

::before疑似要素の位置を自分の幅だけ左に移動。

css
1.absolute .border h3{
2  position: relative;
3  font-size: 30px;
4  display: inline-block; /* 追加 */
5  margin: 0;  /* 追加 */
6}
7
8.absolute .border h3::before {
9  position: absolute;
10  content: "";
11  display: inline-block;
12  width: 90px;
13  height: 90px;
14  background: url(/img/icon.png) no-repeat;
15  background-size: contain;
16  left: -90px; /* 修正 */
17  top: -50px;
18}

投稿2020/11/18 08:11

hatena19

総合スコア34075

css
1.absolute .border h3{
2    display: inline;
3}
4.absolute .border h3::before {
5    left: -90px;
6}

まずブロック要素となっているh3をインライン要素に変えて、テキスト幅を自動で与えます。
するとh3::beforeの基準点がテキスト幅になりますので、テキストの左端から画像の横幅を引いた値を設定します。
そうすれば、画面幅が変わっても画像は同じ位置に表示できます。

投稿2020/11/18 08:00

nelpesica

総合スコア159

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

HTML 文字の前に（before）アイコンを表示させているのですが、画面幅がかわっても正しい位置で表示させたい。

：beforeにてアイコンを表示させているのですが、画面幅がかわると正しい位置で表示できない。

関連した質問