Przerywana górna i dolna krawędź krótsza niż tekst

Question

Chcę uzyskać górny i dolny brzeg jak na poniższym obrazku, w jaki sposób mogę uzyskać dzięki sztuczkom CSS?

Challenge to nie chcę całą szerokość z granicy i powinien on być zbyt wrażliwy.

Obraz w wersji mobilnej to http://i.imgur.com/XZTW28N.jpg i powinien działać również w przeglądarce na komputerze i telefonie komórkowym.

Próbowałem z% szerokości obramowania, ale to nie działa.

Napisałem poniżej kod, ale nie jest to w 100% idealna odpowiedź dla mnie.

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

Zrobiłem kilka zmian w 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:

Jeśli chcesz stałym width można dodać:

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

DEMO2

Answer 2

Oto kolejny podejście używając radial-gradient obraz tła do produkcji kropki na górze i Dolny. Wyjście reaguje, a nie. punktów na górze i dole są określane przez szerokość (na przykład, width: 108px tworzy 9 punktów jako background-size na osi x jest 12px).

Zaletą tego podejścia w stosunku do pozostałych jest to, że pozwala to na większą kontrolę nad wielkością kropek i przestrzeni pomiędzy kropkami. Minusem jest browser support for radial-gradient, który jest niższy (IE10 +) w porównaniu do metody z kropkami.

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>

Zrzut ekranu z dużymi kropkami:

---

Wszystko co jest potrzebne do zrobienia, aby uczynić kropki mniejsze jest zmniejszenie zatrzymanie kolorów procentowych gradientu radialnego. Im mniejsze wartości procentowe, tym mniejsze kropki.

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>

Zrzut ekranu z mniejszych kropek:

Answer 3

Można użyć box-shadows również aby to osiągnąć, najpierw utworzyć after psuedo-element na górze i before pseudoelement na dole, następnie podaj dwa z 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>