前提・実現したいこと
二本の線の上に文字を表示させたい
発生している問題・エラーメッセージ
疑似要素で日本の線を引いてその上に文字を表示させたいと考えております。
二本線は疑似要素で引き終わっているのですがその上に文字を載せれなくて困っています。
自分の考えでは『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でもっていくつもりです
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/29 11:31