疑似要素とは?疑似要素が必要な理由

CSS 疑似要素は、選択した要素の特定の部分のスタイルを設定できるセレクターに追加されるキーワードです.

CSS疑似要素はたくさんありますが、今日は::before と::after 疑似要素についてお話します.

CSS の::before および::after 擬似要素を使用すると、置換されていない要素の前後に「コンテンツ」を挿入できます (たとえば、これらは a では機能しますが、 では機能しません).これにより、HTML コンテンツには存在しない可能性のあるものを Web ページに効果的に表示できます.このようにページに挿入されたテキストを選択してコピーすることさえできないという点で、あまりアクセスしにくいため、実際のコンテンツには使用しないでください.
img {
display: block; /* Avoid the space under the image caused by line height */
position: relative;
width: 100%
}
この記事では、::before と::after を使用して興味深い効果を作成する方法を示す 7 つの異なる例を紹介します.
img::before {
background-color: hsl(0, 0%, 93.3%);
border: 1px dashed hsl(0, 0%, 66.7%);
/* ... */
}
これは、コンテンツを空の文字列 (生成されたコンテンツとスタイルを表示するために必要) に設定し、実際の代替テキストを含むスペース全体をカバーするためです.そこにあります、私たちはそれを見ることができません.

代替テキストを別の (わかりますか?) 方法で表示すると、それがわかります.今回は::after 疑似要素の助けを借りて. content プロパティは、実際には attr() 関数を使用して画像の alt 属性テキストを表示できます.

` img::after {
  content: attr(alt);

  /* Some light styling */
  font-weight: bold;
  position: absolute;
  height: 100%;
  left: 0px;
  text-align: center;
  top: 1px;
  width: 100%;
} 

`