CSS中的尾部装饰标头 [英] Trailing Line Decoration Headers in CSS

问题描述

我正在尝试创建带有一些精美装饰的标题标签.

I am trying to create header tags with a bit of fancy decoration.

最终，我想得出以下结果:

Eventually, I want to arrive at this:

我在文本后面添加尾随修饰时遇到了麻烦.

I am having trouble adding the trailing line decoration after the text though.

我最初的想法是要有一个容器，然后在该容器中放置h1和一个span标记，其中将包含该行.但是我似乎不太可能使该行与位于其上方的文本居中.

My original thoughts were to have a container, then in that container would be the h1 and a span tag that would contain the line. But I can't quite seem to get the line to be centered with the text sitting over it.

我尝试过:

.container {
    width: 100%;
}

h1 {
   display: inline;
   position: relative;
   z-index: 2;
}

span {
    display: inline-block;
    height: 50%;
    width: 100%;
    border-bottom: 1px solid red;
}

和HTML

<div class="container">
    <h1>Test</h1>
    <span></span>
</div>

但是没有运气.有人知道任何技巧可以帮助我实现这一目标吗?最主要的是，文本的长度和高度是可变的，因此我试图使该行占据框的其余部分并位于中间.

But had no luck. Anyone know any tricks that might help me accomplish this? The main thing is that the length and height of the text is variable, so I am trying to get the line to take up the remainder of the box and sit right in the middle.

我也尝试了 display:table-cell ，没有运气...

I also tried display: table-cell with no luck...

推荐答案

您需要类似

html-< h2> Test</h2>

css

h2{
    position:relative;
    overflow:hidden;
}
h2:after {
    content:"";
    top:48%;
    width:100%;
    margin-left:10px;
    height:5px;
    position:absolute;
    background:orange;
}

这篇关于CSS中的尾部装饰标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！