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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2021閲覧

疑似要素よりも上の階層に持っていきたいがz-indexで動かない

eio

総合スコア9

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/09/29 11:05

前提・実現したいこと

二本の線の上に文字を表示させたい

完成させたい形
イメージ説明

発生している問題・エラーメッセージ

疑似要素で日本の線を引いてその上に文字を表示させたいと考えております。
二本線は疑似要素で引き終わっているのですがその上に文字を載せれなくて困っています。
自分の考えでは『z-index』で上の階層に持っていくことができると考えているのですが値を99などにしても上の階層(?)レイヤー(?)に上がってくれないです。
疑似要素の上に持っていくこと自体ができなのでしょうか?

現状の状態
イメージ説明

該当のソースコード

html

1<!DOCTYPE html> 2<head> 3<meta charset="UTF-8"> 4<link rel="stylesheet" href="stylecss.css"> 5</head> 6<html> 7<body> 8<main> 9 <h1>スマホ</h1> 10</main> 11</body> 12</html>

css

1*{ 2 padding: 0; 3 margin: 0; 4} 5body{ 6 background-color:#eaeaea; 7} 8main{ 9 position:relative; 10} 11h1{ 12 text-align: center; 13 display: inline-block; 14 background-color:#eaeaea; 15 z-index: 99; 16} 17 18h1::before{ 19 content: ""; 20 border-bottom: 2px solid red; 21 display: inline-block; 22 width: 100%; 23 position: absolute; 24 top: 18px; 25 left: 0; 26} 27h1::after{ 28 content: ""; 29 border-bottom: 2px solid blue; 30 display: inline-block; 31 width: 100%; 32 position: absolute; 33 top: 20px; 34 left: 0; 35}

試したこと

z-indexの数値を上げてもっと上にやったりしてみましたが効果なしでした。

補足情報(FW/ツールのバージョンなど)

位置に関してはpositionでもっていくつもりです

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

h1::beforeh1::afterで発生する疑似要素は、h1内側に存在する扱いになりますので、h1自体にz-indexをかけても、疑似要素はh1と一緒に移動するだけで、h1に書かれた文字との上下関係という観点では何の影響も出ません。

投稿2020/09/29 11:15

編集2020/09/29 11:19
maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

eio

2020/09/29 11:31

h1の内側に存在する… お、奥が深いですね。 (難しいですが一つ知識になりました!) という事はどうせ移動させるという事を考えると二本線の疑似要素はどこか別のところで発生させれば問題なしと思われますのでその方向でやってみます。 ありがとうございました!
guest

0

もう、解決済みですが、、

html

1<main> 2 <h1><span>スマホ</span></h1> 3</main>

css

1main{ 2 position:relative; 3} 4h1{ 5 text-align: center; 6 display: inline-block; 7 background-color:#eaeaea; 8} 9h1 > span { 10 position: relative; 11 z-index: 2; 12}

投稿2020/09/29 14:58

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問