如何在标题周围创建双面虚线？

Question

我试图在模板顶部实现标题（h1），如下所示（点代表垂直居中的点图像线）：

title example http://www.pixelplus.nl/klanten/klijsen/example.jpg

通常我会这样做：

<h1><span>This is a title</span></h1>

将文字置于h1中心，并为span添加背景颜色以及一点填充。

在当前项目中，我处理background-image上的透明背景。所以...背景色的span不会飞。

在尝试了一些事情后，这是最接近的：

<header class="headerPage">
    <div class="row">
        <div class="dotted">&nbsp;</div>
        <div class="title"><h1>This is a title</h1></div>
        <div class="dotted">&nbsp;</div>
    </div>
</header>

这个CSS：

header.headerPage {
    display: table;
    margin: 0 0 35px;
    width: 100%;
}
header.headerPage .row {display: table-row;}
header.headerPage .row div {display: table-cell;}
header.headerPage .row div.dotted {
    width: 10%;
    background: url('../img/line-dotted.svg') left center repeat-x transparent;
}
header.headerPage .row div.title {
    padding: 0 15px;
    text-align: center;
}
header.headerPage .row div.title > * {display: inline;}
header.headerPage .row div h1 {margin: 0;}

正如您所见，标题充当table。问题在于虚线div的width: 10%;。如何使这些变量具有相对于h1的动态高度的可变宽度？希望这可以在css / scss中完成。

Answer 1

此解决方案改编自此答案：Line separator under text and transparent background

虚线将根据文本的高度（字体大小，多行）保持垂直居中，并适应文本的宽度：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body{
    background-image: url(http://fr.playstation.com/media/5ZfqPjVF/BigSkyInfinity_Hero_EN.JPG);
    background-repeat:no-repeat;
    background-size:100% auto;
    font-family: 'Open Sans', sans-serif;
}

.divider{
    color:#ccc;
    width:70%;
    margin:20px auto;
    overflow:hidden;
    text-align:center;   
    line-height:1.2em;
}

.divider:before, .divider:after{
    content:"";
    vertical-align:middle;
    display:inline-block;
    width:50%;
    border-bottom:2px dotted #ccc;
    margin:0 2% 0 -55%;
}
.divider:after{
    margin:0 -55% 0 2%;
}
h1:nth-child(2){
    font-size:3em;
}
span{
  display:inline-block;
  vertical-align:middle;
  }

<h1 class="divider">Today</h1>
<h1 class="divider">Today News</h1>
<h1 class="divider"><span>Today News<br/>More text<span></h1>

请注意，如果您没有多行，则可以在没有<span>且只有一个标记的情况下实现效果。

Answer 2

您可以使用伪元素执行此操作：

<强> DEMO

body {
  background: tomato;
  /* or whatever */
}
h1 {
  text-align: center;
  overflow: hidden;
}
span {
  display: inline-block;
  position: relative;
  padding: 0 10px;
}
span:before,
span:after {
  content: '';
  display: block;
  width: 1000px;
  position: absolute;
  top: 0.73em;
  border-top: 1px dotted black;
}
span:before {
  right: 100%;
}
span:after {
  left: 100%;
}
.small {
  font-size: 10px;
}

<h1><span>Text</span></h1>

<h1><span>Lengthy Text</span></h1>

<h1><span>Very Lengthy Text</span></h1>

<h1><span class="small">Smaller Font</span></h1>

Answer 3

您应该在h1的背景中使用虚线图像，并使用span的背景颜色，从左右两侧显示h1填充以显示背景。

Answer 4

DEMO

不完全确定你想要什么，但这是我的结论。

方法1：使用您的代码

header.headerPage {
    display: table;
    margin: 0 0 35px;
    width: 100%;
}
header.headerPage .row {display: table-row;}
header.headerPage .row div {display: table-cell;}
header.headerPage .row div.dotted {
    width: 10%;
    background: #ed8;
    border-bottom:1px dotted #000;
}
header.headerPage .row div.title {
    padding: 0 15px;
    text-align: center;
    background: #ed8;
}
header.headerPage .row div.title > * {display: inline;}
header.headerPage .row div h1 {margin: 0;}

<header class="headerPage">
    <div class="row">
        <div class="dotted">&nbsp;</div>
        <div class="title"><h1>Klijsen, bijna 50 jaar ervaring</h1></div>
        <div class="dotted">&nbsp;</div>
    </div>
</header>

方法2：优化代码

根据你的评论，这是一个精心修剪的版本，使用较少的代码和一点点的手来创建你想要的效果（我认为）。

.headerPage .row{
    width:100%;
    background: #ed8;
    border-bottom:1px dotted #000;
    text-align:center;
}
.headerPage .title {
    padding: 0 10px;
    border-bottom:2px solid #ed8;
    font-size:28px;
    font-weight:bold;
}

<header class="headerPage">
    <div class="row">
        <span class="title">Klijsen, bijna 50 jaar ervaring</span>
    </div>
</header>

Answer 5

正如评论中已提到的，您可以尝试修改this answer类似的问题。

CSS：

        h1 {
            position: relative;
            width: 100%;
            text-align: center;
        }
        h1 .text {
            position: relative;
            display: inline-block;
            background: white;
            margin: auto;
        }
        h1 .filler {
            position: absolute;
            left: 0;
            right: 0;
            border-bottom: dotted 1px black;
            height: 50%;
        }

和HTML：

    <h1><div class="filler"></div><div class="text">Your Title</div></h1>

基本上，文本的背景将隐藏文本所在的填充符底部边框。您可以通过在文本元素中左右填充填充来隐藏更多边框。