如何在css中标题之前和之后显示水平线

我想在css中设置html标题的样式，但没有得到正确的结果，因为我的jsfiddle显示：https://jsfiddle.net/Nadjanara/nmo0245t/。以下是HTML和CSS代码：如何在css中标题之前和之后显示水平线

<h2><span>Heading2</span></h2> 

h2{ 
    width:100%; 
    text-align:center; 
    border-bottom: 1px solid #000; 
    line-height:0.1em; margin:10px 0 20px; 
} 
h2 span{ 
    padding:0 10px; 
}

我怎么只能把之前的水平线和标题后也控制了线的宽度，使这种不占用的全宽屏幕？

来源

2016-07-05 Nadj

明显有很多方法可以实现您的目标。但是像this这样的东西呢？

h1 { 
 
    font-size: 4rem; 
 
} 
 
h1::before, 
 
h1::after { 
 
    display: inline-block; 
 
    content: ""; 
 
    border-top: .3rem solid black; 
 
    width: 4rem; 
 
    margin: 0 1rem; 
 
    transform: translateY(-1rem); 
 
}

<h1>Heading</h1>

来源

2016-07-05 22:09:38 Jonathan

确实。它看起来比它更好。但是仍然存在两个问题：线条与标题太靠近了。而且这条线有点抛到了顶端，而不是在中间显示出来：例如p ---- – Nadj

因此，对转换百分比和边距进行调整。所有你需要做的是获得正确的相对比例，你就完成了 - 不需要更多的调整。 – Jonathan

@Nadj。像乔纳森说的。只需添加一个保证金 - 左侧和右侧。将变换转换为90％，并与时间同步。检查jsfiddle：https：//jsfiddle.net/Wosley_Alarico/fkrc15mh/ –

给这个镜头！一个pseduo元素将是你最好的选择。你可以将行的宽度更改为任何你需要的宽度，但是对于这个例子我使用了500px。

h2{ 
    text-align:center; 
    line-height:0.1em; 
    position:relative; 
    margin:10px 0 20px; 
    background:#FFF; 
} 
h2 span{ 
    background:#FFF; 
    z-index:2; 
    position: relative; 
} 
h2:before{ 
    content:''; 
    position:absolute; 
    display:block; 
    top:50%; 
    height:1px; 
    width: 500px; 
    background:#000; 
    left:50%; 
    z-index:1; 
    transform:translateX(-50%); 
    -webkit-transform:translateX(-50%); 
}

来源

2016-07-05 21:27:41 will

它变得更好，现在我可以控制线的整个宽度。但问题依然存在，因为我无法在标题和行间（左侧和右侧）之间留出空间。例如：------标题-----。而不是----------标题------------ – Nadj

如何在css中标题之前和之后显示水平线

回答

相关问题