Bordo tratteggiato superiore e inferiore più corto del testo

Question

Voglio ottenere il bordo superiore e inferiore come nell'immagine qui sotto come posso ottenere con i trucchi CSS?

Challenge è che non voglio tutta la larghezza con bordo e dovrebbe essere sensibile anche.

L'immagine della versione mobile è http://i.imgur.com/XZTW28N.jpg e dovrebbe funzionare anche nel browser desktop e mobile.

Ho provato con il bordo di larghezza% ma non funziona.

Ho scritto sotto il codice ma non è la risposta perfetta al 100% per me.

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

Ho fatto alcuni cambiamenti nel vostro 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:

Se si desidera un fisso width è possibile aggiungere:

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

DEMO2

Answer 2

Ecco un altro approccio utilizza un'immagine di sfondo radial-gradient per produrre i punti in alto e in parte inferiore. L'output è reattivo e il no. di punti in alto e in basso sono determinati dalla larghezza (ad esempio, width: 108px produce 9 punti come background-size nell'asse x è 12px).

Il vantaggio di questo approccio rispetto agli altri è che questo consente un maggiore controllo sulla dimensione dei punti e lo spazio tra i punti. Lo svantaggio è il browser support for radial-gradient che è inferiore (IE10 +) rispetto al metodo del bordo punteggiato.

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 con grandi punti:

---

Tutto ciò che è necessario per essere fatto per rendere i punti di dimensioni più piccole è quello di ridurre la percentuali di arresto del colore del gradiente radiale. Più piccole sono le percentuali, più piccoli sono i punti.

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>

Schermata con i puntini più piccoli:

Answer 3

È possibile utilizzare box-shadows anche per raggiungere questo obiettivo, prima creare un pseudo-elemento after sulla parte superiore e un before pseudo-elemento in fondo quindi dare i due del 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>