我有一个带有 :after 标签的 h1 元素,需要动态扩展以填充包含div 的剩余宽度。 基本上,它需要具有 calc(h1_width - 100%( 的宽度,其中 h1 宽度未设置或硬编码。这可以通过 SASS 完成,还是我需要使用 JS 选项来操作 DOM?JSfiddle。
.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;
}
}
您可以使用h1
上的display:flex
使:after
占用剩余空间:
.text-box__wrap {
width: 100%;
margin-top: 2em auto 0;
padding: 0 20px;
box-sizing: border-box;
}
.text-box__wrap h1 {
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 12px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: flex;
align-items: center;
}
.text-box__wrap h1:after {
display: inline-block;
height: 1px;
flex: 1 1 auto;
margin-left: 10px;
content: "";
background-color: black;
}
<div class="text-box__wrap">
<h1>Hello</h1>
</div>