Q&A
ご提示のコードを試してみましたが、疑似要素は表示されています。
https://jsfiddle.net/m1p6bot5/
どのようにしたいのでしょうか？
タイトルの通りです 文字に下線を引くために疑似要素を設定したのですが、効きません
contentやwidth,heightはきちんと書きました z-index:1;も追加してみましたが表示されません
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>isara模写</title> 6 <link rel="stylesheet" href="css/isara.css"> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet"> 9 </head> 10 <body> 11 12 13 <div class="beginning-page"> 14 <h2 class="beginning-title">エンジニアとして本当の自由を手に入れるためには？</h2> 15 <p>エンジニア需要の高まりに伴い、プログラミングスクールが増えています。<br> 16 しかしそこでの学習の先は、 提携して決められた就職先に就職すること。</p> 17 <p>これで本当にいいのですか？<br> 18 日本人エンジニアはアメリカと較べて給料が格段に低い。<br> 19 その理由がここにあり、 エンジニアは自分の給料をコントロールすべきなのです</p> 20 <p>スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。<br> 21そこで必要なのが <span>「稼ぐ力」</span>です。</p> 22 </div> 23 </body> 24</html>
CSS
1.beginning-page{text-align:center; height:590px; background:url(../img/introbottom.jpg) no-repeat; 2 background-size:cover; padding-top:85px;} 3 .beginning-title{font-size:1.8rem; letter-spacing:1px; position:relative; 4 display:inline-block; margin-bottom:80px;} 5 .beginning-title::before{content:""; width:50px; height:50px; border-top:solid 4px #EBB94D; 6 border-left:solid 4px #EBB94D; position:absolute; left:-70px; top:-40px;} 7 .beginning-title::after{content:""; width:50px; height:50px; border-bottom:solid 4px #EBB94D; 8 border-right:solid 4px #EBB94D; position:absolute; right:-70px; top:20px;} 9 .beginning-page p{font-size:1.3rem; letter-spacing:1px; margin-bottom:35px; line-height:1.5;} 10 .beginning-page span{font-weight:bold; position:relative; display: inline-block;} 11 .beginning-page span::before{content:""; color:#EBB94D; right:0; left:0; bottom:3px; 12 height:10px; width:110px; position:absolute; z-index:1;}
回答1件
0
ベストアンサー
.beginning-page span::beforeに下線が設定されていません
border-bottom: 3px solid #EBB94D;を追加してください
下線の位置はpositionで調整してください。
css
1 2 .beginning-page span::before{content:""; color:#EBB94D; right:0; left:0; bottom:3px; 3 height:10px; width:110px; position:absolute; z-index:1; 4border-bottom: 3px solid #EBB94D; 5}
また、疑似要素で指定しなくてもspanに指定しても下線は引けます
css
1 2 .beginning-page span{font-weight:bold; display: inline-block; 3 border-bottom: 3px solid #EBB94D; 4}
投稿2021/02/17 13:15
総合スコア30
あなたの回答
tips
プレビュー
