Gepunktete obere und untere Rand kürzer als Text

Question

Ich möchte Rand oben und unten wie unten Bild erreichen, wie kann ich mit CSS-Tricks erreichen?

Challenge I mit Grenze nicht ganze Breite wollen und es sollte zu reagieren.

Mobile Version Bild ist http://i.imgur.com/XZTW28N.jpg und es sollte auch in Desktop-und mobilen Browser funktionieren.

Ich versuchte mit% Breite Grenze, aber es funktioniert nicht.

Ich schrieb unter Code, aber es ist nicht 100% perfekte Antwort für mich.

HTML:

<h1>How it Works</h1 

CSS:

h1:before, h1:after { 
    content: ""; 
    height: 1px; 
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%); 
    display: block; 
    margin-bottom: 10px; 
    margin-top: 10px; 
} 

http://jsfiddle.net/wjhnX/488/

Answer 1

Ich habe ein paar Änderungen in Ihrem CSS:

h1{ 
    text-align: center; 
    font-size: 70px; 
} 

h1:before, h1:after{ 
    position: relative; 
    content: ""; 
    width: 30%; 
    left: 35%; 
    display: block; 
    margin-bottom: 10px; 
    margin-top: 10px; 
    border-bottom: 5px dotted yellow; 
} 

DEMO

EDIT:

Wenn Sie eine feste width möchten, können Sie hinzufügen:

h1:before, h1:after{ 
    width: 150px;  /* You can change this value */ 
    left: 50%; 
    transform: translateX(-50%); 
} 

DEMO2

Answer 2

Hier ist ein weiterer Ansatz radial-gradient Hintergrundbild mit den Punkten an der Spitze zu erzeugen und Unterseite. Der Ausgang reagiert und die Nr. Die Anzahl der Punkte oben und unten wird durch die Breite bestimmt (z. B. width: 108px erzeugt 9 Punkte, da background-size in x-Achse 12px ist).

Der Vorteil dieses Ansatzes gegenüber den anderen besteht darin, dass dies eine größere Kontrolle über die Größe der Punkte und den Abstand zwischen den Punkten ermöglicht. Der Nachteil ist die browser support for radial-gradient, die niedriger ist (IE10 +) im Vergleich zu gepunkteten Rand-Methode.

h1 { 
 
    position: relative; 
 
    text-align: center; 
 
    font-size: 48px; 
 
    line-height: 1em; 
 
    padding: 0.625em; 
 
    font-family: Calibri; 
 
    font-weight: 100; 
 
} 
 
h1:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 108px; /* multiples of background-size in X-axis */ 
 
    height: 100%; 
 
    top: 0px; 
 
    left: calc(50% - 50px); 
 
    background: radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 30%, transparent 50%), radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 30%, transparent 50%); 
 
    background-size: 12px 6px; 
 
    background-repeat: repeat-x; 
 
    background-position: 50% 0.125em, 50% 2em; 
 
} 
 
/* Just for demo */ 
 

 
body { 
 
    background: rgb(9, 133, 143); 
 
    color: white; 
 
}

<!-- library included to support older browsers --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 

 
<h1>How it works</h1> 
 

 
<h1>How it works with long text</h1>

Screenshot mit großen Punkten:

---

Alles, was getan werden soll, benötigt die Punkte in der Größe kleiner zu machen, ist die zu reduzieren Farbstopp-Prozentsätze des radialen Gradienten. Je kleiner die Prozentsätze, desto kleiner die Punkte.

h1 { 
 
    position: relative; 
 
    text-align: center; 
 
    font-size: 48px; 
 
    line-height: 1em; 
 
    padding: 0.625em; 
 
    font-family: Calibri; 
 
    font-weight: 100; 
 
} 
 
h1:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 108px; /* multiples of background-size in X-axis */ 
 
    height: 100%; 
 
    top: 0px; 
 
    left: calc(50% - 50px); 
 
    background: radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 25%, transparent 35%), radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 25%, transparent 35%); 
 
    background-size: 12px 6px; 
 
    background-repeat: repeat-x; 
 
    background-position: 50% 0.125em, 50% 2em; 
 
} 
 

 
/* Just for demo */ 
 

 
body { 
 
    background: rgb(9, 133, 143); 
 
    color: white; 
 
}

<!-- library included to support older browsers --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 

 
<h1>How it works</h1> 
 

 
<h1>How it works with long text</h1>

Screenshot mit kleineren Punkten:

Answer 3

können Sie box-shadows verwenden auch dies zu erreichen, wird zunächst ein after psuedo-Element oben schaffen und ein before Pseudo-Element auf der Unterseite geben Sie dann die zwei der box-shadows

body{ 
 
\t background:#09858F; 
 
} 
 

 
div{ 
 
\t position:relative; 
 
\t display:inline-block; 
 
\t margin:100px; 
 
} 
 
h1{ 
 
\t text-align:center; 
 
\t font-family: Calibri; 
 
\t font-size:50px; 
 
\t color:#fff; 
 
\t margin:50px; 
 
} 
 

 
h1:after{ 
 
\t content:""; 
 
\t position:absolute; 
 
\t left:30%; 
 
\t height:10px; 
 
\t width:10px; 
 
\t background:yellow; 
 
\t top:20%; 
 
\t border-radius:50%; 
 
\t box-shadow:20px 0 0 0 yellow,40px 0 0 0 yellow,60px 0 0 0 yellow,80px 0 0 0 yellow,100px 0 0 0 yellow,120px 0 0 0 yellow,140px 0 0 0 yellow,160px 0 0 0 yellow; 
 
} 
 
h1:before{ 
 
\t content:""; 
 
\t position:absolute; 
 
\t left:30%; 
 
\t height:10px; 
 
\t width:10px; 
 
\t background:yellow; 
 
\t bottom:20%; 
 
\t border-radius:50%; 
 
\t box-shadow:20px 0 0 0 yellow,40px 0 0 0 yellow,60px 0 0 0 yellow,80px 0 0 0 yellow,100px 0 0 0 yellow,120px 0 0 0 yellow,140px 0 0 0 yellow,160px 0 0 0 yellow; 
 
}

<div><h1>How it Works</h1></div>