cssでテキストの中央の上下に縦線を表現したいです。

Question

htmlでホームページを作成しています。

cssで画像のようなテキストの中央にの上下に縦線をデザインとして入れたいのですが、どうすれば良いか全くわかりません。調べると水平線をテキストの両脇に入れるCSSは出てくるのですが、縦線が出てきません。
どなたか教えていただけませんでしょうか？

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

Answer 1

擬似要素のbeforeとafterを使用することで簡単に実現することが可能です。
サンプルを作成したのでご確認ください。
jsFiddle

Comments

[moms]

ご丁寧にサンプルをつけてくださりありがとうございました。大変参考になりました。
擬似要素しっかり勉強してみます。ありがとうございました！