我试图获得一个双边(带下划线)标题。第一个是全宽,第二个是文本宽度。边界应该重叠 有两个嵌套的简单解决方案:
<h1><span>Title</span></h1>
和css:
h1 {
border-bottom: 1px solid red;
}
h1 span {
display: inline-block;
padding: 0 0 10px;
margin-bottom: -1px;
border-bottom: 1px solid blue;
}
Span具有inline-block
显示属性,因此它具有正确的宽度。
我想知道是否可以通过:after
,:before
选择器和仅h1
元素获得相同效果。
答案 0 :(得分:3)
可以这样做。我使用了vw单位。
看看这个Working Fiddle
<强> HTML:
<h1 class="SpecialBorder">Title</h1>
<强> CSS:
*
{
margin: 0;
padding: 0;
}
.SpecialBorder
{
display: inline-block;
position: relative;
}
.SpecialBorder:before , .SpecialBorder:after
{
content:'';
position: absolute;
left: 0;
bottom: 0;
}
.SpecialBorder:before
{
width: 100vw;
border-bottom: 1px solid red;
}
.SpecialBorder:after
{
width: 100%;
border-bottom: 1px solid blue;
}
<强>说明:
before
&amp; after
伪元素是绘制边界的元素。
它们都是空元素。具有一定宽度,使其边框可见。
他们绝对位于<h1>
父母的底部。
before
:负责红色边框。所以他的宽度设置为视口的'100%'。
after
:负责红色边界。所以他的宽度被设置为他父母的100%
(<h1>
),这就是为什么h1
被设置为`display:inline-block;“(所以它会像他的内容)
vw
单位。
请注意,如果您无法使用vw
单位,您仍然可以对此进行熟悉。
从display:inline-block;
删除h1
(导致它再次跨越)
将before
的宽度更改为100%
(使其一直延伸),
将after
的内容更改为您选择的某个固定值。
编辑:作为 thgaskell 在评论中说明,
有一个错误,
vw
单位无法在webkit上正确更新 调整窗口大小时的浏览器。
编辑2:
要使元素在标题后显示,您可以使用<br />
标记,或清除显示here等技术。
答案 1 :(得分:0)
我不确定这是不是你想要的,但你可以做这些规则:
h1 {
...
}
/* here are the direct children of every h1 */
h1>* {
...
}
当插入新内容时(注意双冒号), ::after
和::before
选择器才有意义。这是::after
选择器上的一些MDN和一些示例: