我有h3并希望在DAY-BY-DAY字之前/之后和之后有一行,但只能在:: after和:: before之前在该字的顶部和底部实现一行。如何通过flex实现这一点,请帮忙。
有点像---- DAY-BY-DAY ----
这是html:
<h3 id ="daybyday"><span style="font-style: italic; font-size: 23px; color: #7B7B7A;">DAY-BY-DAY</span><`/h3>`
这是CSS:
#daybyday::before {
content: "";
display: block;
background: salmon;
height: 5px;
}
#daybyday::after {
content: "";
display: block;
background: salmon;
height: 5px;
}
你想要这样的东西吗?
所以我们在这里做的是,我们用color: salmon
和5px
的高度创建一个div,然后我们使用display:flex
设置元素的flex属性,使用flex属性(align-items:center
- >用于垂直居中和justify-content:center
- >用于水平居中,我们可以在行的中心得到h3
元素,最后为了防止h3
元素后面的div被可见,我设置background-color:white
,使它不可见!
#daybyday {
display: inline;
background-color:white;
}
.text-special {
font-style: italic;
font-size: 23px;
color: #7B7B7A;
}
.line {
background-color: salmon;
height: 5px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
<div class="line">
<h3 id="daybyday"><span class="text-special">DAY-BY-DAY</span></h3>
<div>