我正在为我的主页创建一些程式化的标题。我迷上了这种类型的标题,我想知道是否可以用 css 创建类似的东西。如果有一定的重要性,我会使用 Bootstrap 样式。
它可能非常微弱,但标题后面有一个条纹“条”填充了容器的其余部分。我试着寻找它,但只找到了以标题前后一行为中心的标题。只有两行的标题类型(一行在标题顶部,一行在标题底部)也可能对我有用。
header 放在 .container 内,我希望 header 长度为 .container 的整个长度:
<div class="container">
<h3><span>Projects</span></h3>
</div>
JSFiddle:https://jsfiddle.net/ozxk82j1/1/
提前致谢!
最佳答案
首先,HTML 无效。 span
是 inline
元素不能包含 h3
,因为它们是 block 级的。
除此之外,这里使用重复线性渐变的伪元素没问题:
使用 flexbox 的例子,虽然你可以绝对定位伪元素,给它一个很长的宽度,并在 h3
上应用 overflow:hidden
任何......呃, 溢出。
h3 {
display: flex;
}
h3::after {
content: '';
background: repeating-linear-gradient(135deg,
transparent, transparent 2px,
lightgrey 4px, lightgrey 6px);
flex: 1;
margin-left: .25em;
}
<div class="container">
<h3>Projects</h3>
<h3>Lorem ipsum dolor ipsum.</h3>
</div>
可以调整伪元素的高度(align-items:center
将使其垂直居中)并且可以使用 RGBA 颜色调整“线条”的不透明度。
h3 {
display: flex;
align-items: center;
}
h3::after {
content: '';
background: repeating-linear-gradient(135deg,
transparent, transparent 2px,
rgba(0,0,0,0.1) 4px, rgba(0,0,0,0.1) 6px);
height:.5em;
flex: 1;
margin-left: .25em;
}
<div class="container">
<h3>Projects</h3>
<h3>Lorem ipsum dolor ipsum.</h3>
</div>
关于html - 使用 css 创建一个程式化的 html 标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36113560/