konvexe border-top und border-bottom mit css?

Question

Ich versuche, eine Grenze nur für oben und Grenze mit einer Linie, die dick ist (4px) in der Mitte und an den Enden geht zu Null. Wie im Bild

.hervorheben{ 
    line-height: 1.6em; 
    margin-bottom: 1.6em; 
    margin-top: 1.6em; 
    text-rendering: optimizeLegibility; 
    border-top: 1px solid #105322; 
    border-bottom: 1px solid #105322; 
    padding: 19px; 
    margin: auto auto; 
} 

Wissen Sie, wie dies zu tun mit nur CSS?

Answer 1

Sie können `t Grenze so machen, aber Sie können mit Pseudo-Element (nach) verwalten wie folgt

.your_class { 
    position: relative 
} 

.your_class:after { 
    position: absolute; 
    width: 100%; 
    height: 4px; 
    background: #000; 
    border-radius: 100%; 
    content: ""; 
    top: 0; 
    left: 0; 
} 

Genießen ....