CSSはそうは以下のように、私はイメージを持っている画像

Question

の前と後の行を追加します。そのよう

：

------------------- -------------------画像 -

:beforeと:afterのものが分かりません。私の質問は、イメージの前後に行を追加する方法です。

Answer 1

Flexboxでこれを行うことができます。あなたは垂直に中心を置くことができますimgと行align-items: centerflex: 1:beforeと:afterは残りの幅を取るでしょう。

a { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
a:before, 
 
a:after { 
 
    flex: 1; 
 
    content: ''; 
 
    height: 1px; 
 
    background: black; 
 
}

<a href=""> 
 
    <img src="http://placehold.it/100x100"> 
 
</a>

Answer 2

あなたは、疑似要素にラインを設定し、必要に応じて位置を調整することができます。

jsFiddle

a { 
 
    display: block; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
a:after { 
 
    content: ""; 
 
    width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    height: 1px; 
 
    background: green; 
 
    z-index: -1; 
 
}

<a href="#"> 
 
    <img src="//dummyimage.com/50"> 
 
</a>