after要素をつくって表示するほうが取り回ししやすいの、この方法で作成することをオススメします。CSSで作成することでアニメーションもCSSで行うことが簡単にできるようになります。図にあるように、以下のような手順を行うことで簡単に作成することができます。中央の横棒をつくるbefore要素で同じ長さの横棒をつくるafter要素で同じ長さの横棒をつくる2.中央の横棒をつくる最初は中央の横棒をつくっていきます。ここで作成した横棒の幅と高さが上下2本の横棒の同じ幅と高さになります。backgroundの指定は以前にcurrentColorについて少し解説した記事があるのでそちらを御覧ください。CodePen.3.before要素で同じ長さの横棒をつくる次に上の横棒をbeforeを使ってつくっていきます。疑似要素は指定した要素の子要素と同様のものとして生成されるので、widthやheightは親要素を基準に計算されます。そのためwidthやheightなどに100%を指定すると自動的に親要素(中央の横棒)と同じ大きさに表示することができるようになります。CodePen.4.after要素で同じ長さの横棒をつくる最後に下の横棒も、上の横棒と同じようにつくっていきます。基本的に上と下の横棒はほぼ同じスタイルを使うことができて、違いは上下の配置ぐらいなのでどちらか一方ができればもう片方もできると思います。