1
私はa:afterタグを含むh1要素を持っています。これは、divを含む残りの幅を埋め込むように動的に展開する必要があります。基本的には、h1幅が設定されていないか、またはハードコードされている場合、計算の幅(h1_width-100%)が必要です。これはSASSを介して行うことができますか、またはDOMを操作するためにJSオプションを使用する必要がありますか? JSfiddle。あなたは:after
は、残りのスペースを取る作るためにh1
にdisplay:flex
を使用することができます:divの残りの幅を埋めるために展開されるafterタグ
HTML
<div class="text-box__wrap">
<h1>Hello</h1>
</div>
CSS
.text-box__wrap {
width: 100%;
margin-top: 2em auto 0;
padding: 0 20px;
}
.text-box__wrap h1 {
margin-bottom: 4%;
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 12px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
&:after {
display: inline-block;
/* Needs to be dynamic based on difference of h1 width and remaining div width */
width: 50px;
height: 1px;
margin-left: 10px;
content: "";
vertical-align: 30%;
background-color: black;
}
}