如何使H1标签看起来像这样

Question

当我遇到一个问题时，我正在开发某个网页。

 <h1 class="h-padrao">SECRETARIAS</h1>

是否可以使用css和html（无图像）使h1，h2，h3标签看起来像这样？

我尝试使用以下方法：但之后我没有成功

感谢

Answer 1

这是一个没有溢出问题的解决方案：http://jsfiddle.net/functionalcss/gbu3ghr5/。

HTML：

<h1 class = "dotted-line">functionalcss.com</h1>

CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

.dotted-line {
    font: normal 20px/1 Sans-Serif;
    color: #aaa;
    position: relative;
}

.dotted-line:first-line {
    background-color: #fff;
    box-shadow: 10px 0 0 #fff;
}

.dotted-line:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    border-bottom: 1px dotted #aaa;
    z-index: -1;
}

Answer 2

关于@ CBRoe的建议，你可以这样做：

h1:after {
    content: "";
    position: absolute;
    border-bottom: 1px dotted black;
    top: 20px;
    width: 100%;
    margin-left:20px;
}

JSFiddle

Answer 3

为了好玩，

更像是text-shadow和background的诀窍：http://codepen.io/gc-nomade/pen/wItAd

h1 {
  background:repeating-linear-gradient(to left,transparent 0px, transparent 1px, black 1px, black 2px) center repeat-x;
  background-size:2px 2px;
  text-shadow:
    0 0 20px white, 
    0 0 20px white,
    0 0 20px white,
    0 0 20px white,
    0 0 20px white,
    0 0 20px white,
    0 0 20px white,
    0 0 20px white,
    0 0 20px white,
    0 0 20px white,
    0 0 20px white,
    10px 0 white
}

Answer 4

HTML：

<h1>SECRETARIAS<span></span></h1>

CSS：

h1{
    float: left;
    width: 0;
    padding-right: 25px;
    white-space: nowrap;
    color: #656565;
    font-size: 14px;
}
h1 span:before  {
    content: "------------------------------------------ " ;
    padding-left: 8px;
}