テキストの右側に水平線を引きたく、以下のようにspanタグを使って、テキスト部分の水平線を消す方法を試してみたのですがうまくいきません。
擬似要素内では「width:85%;」の部分が継承されないので、inheritを使っているのですが、こうすると水平線が表示されなくなってしまいます。
擬似要素afterのwidthに100%など数値を指定すれば水平線は表示されるのですが。
こちらの解決策が分かる方がいましたら教えていただきたいです。
また、widthを100%などで表示した場合、spanで「padding-right: 7px;」としているのに「writer」というテキストと水平線の間に余白を作ることができないので、こちらも分かる方がいましたらどうかご回答お願いします。
width:100%;の出力結果の上部水平線を下部の下線と幅を合わせたいと考えています。
HTML
1<div class="writer-info"> 2 <p class="writer"><span>Writer</span></p> 3</div>
CSS
1.writer-info { 2 width: 85%; 3 margin-left: auto; 4 margin-right: auto; 5 margin-top: 15px; 6 7 .writer { 8 color: $brand-secondary; 9 font-size: 11px; 10 position: relative; 11 12 :after { 13 border-top: 1px solid $brand-secondary; 14 content: ""; 15 position: absolute; 16 top: 50%; 17 width: inherit; 18 } 19 20 span { 21 background-color: white; 22 display: inline-block; 23 padding-right: 7px; 24 } 25}
回答1件
あなたの回答
tips
プレビュー