pseudo-elementsを使用してタイトルを飾る

このドキュメントは更新を続行します.
❗間違った情報や間違いがあればコメントにご自由に!🥰

仮想要素は、実際のHTMLページの要素と同じ効果を持つCSSセレクタですが、存在しません.仮想要素を使用せず、タイトルにborder-leftを適用するだけで、似たような装飾効果を示すことができますが、border-radiusを利用するために、設計に統一性を加えるか、仮想要素を使用してみましょう.
CSSでコンテンツ(コンテンツ)属性を持つ仮想要素(:before,::after)の中には、Webブラウザ開発ツールでも要素(Element)として扱われ、HTMLソースビューに仮想要素が個別に表示されます.
仮想要素は、下部のHTMLタグにスタイルを付与するのと完全に似ているように見えます.
For example, the following document fragment and style sheet:

<p> Text </p>                   
p:before { display: block; content: 'Some'; }

...would render in exactly the same way as the following document fragment and style sheet:

<p><span>Some</span> Text </p>  
span { display: block }

Similarly, the following document fragment and style sheet.

<h2> Header </h2>
h2:after { display: block; content: 'Thing'; }

...would render in exactly the same way as the following document fragment and style sheet:

<h2> Header <span>Thing</span></h2>
h2 { display: block; }
span { display: block; }

👉 NAVERはどのように仮想要素を使用しますか?

li:before{
content: '';
display: inline-block;
position: absolute;
top: 3px;
left: 12px;
width: 1px;
height: 12px;
border-radius: 0.5px;
background-color: #dadada;
}

仮想要素のコンテンツ価値は多様です.stringやimgなどはたくさんあげられます.コンテンツがコードのようにstring形式で与えられ、空の場合、要素はinline形式でコンテンツの数に応じて幅を増やします.したがって、コンテンツが空のままであると、コンテンツは表示されません.したがって、displayをinline-blockで置き換え、position absoluteで位置決めすることができます.

 #footer .partner_box .link_partner+.link_partner:before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    background-color: #e4e8eb;
    vertical-align: -1px;
    margin: 0 8px;
}

垂直位置合わせ(Vertical Align)は、インライン要素またはインラインブロック要素の間で垂直位置合わせを行う方法を指定するアトリビュートなので、他の要素と位置合わせする場合は、垂直位置合わせ(Vertical Align)を簡単に行うことができます.

.header::before {
    content: "";
    display: inline-block;
    height: 25px;
    width: 5px;
    background-color: black;
    vertical-align: middle;
    border-radius: 0 4px 4px 0;
    margin-right: 15px;
}

before仮想要素で装飾要素を追加しました.

宗燦のフィードバック(4.4)

仮想要素のwidth、heightをem単位に設定すると、以降のタイトルフォントサイズに対応する装飾要素になります.
やはりこんな拡張性があるとは思わなかったので、かっこいいですね.その後、フォントサイズに対応してタイトルが1行以上維持できるケース、右にbutton要素を追加し、各デザインも変化する課題を作りたいと思います.一緒にやる人募集へへへ~!

参考資料:https://www.w3.org/TR/CSS2/generate.html#before-after-content