表示結果 Dummy Text 解説 display: flex;(CSS:4行目) p要素をflexコンテナ化することで、内包するテキストがflexアイテムになります。 align-items: center;(CSS:5行目) flexアイテム(p要素内のテキストと、before,afterで生成された疑似要素)を上下中央に配置。 flex-grow: 1;(CSS:9行目) 左右の疑似要素(ボーダー)の幅を、空いているスペースいっぱいまで広げています。 height,background(CSS:10,11行目) heightでボーダーの太さを、backgroundで色を指定しています。 display: block;(CSS:12行目) 疑似要素は、displayプロパティにblockやinlineを指定しないとIEで表示されません。 margin-○○: .4em;(CSS:15
![【CSS】テキストの左右にボーダーを入れる方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/23d4d1ed59e58ed06f215fc5ea10aba9abf5a607/height=288;version=1;width=512/https%3A%2F%2Fkuzlog.com%2Fimg%2F2017%2F01%2Ftxtlrbdr_t.jpg)