きまぐれ引きこもりんご80%

ビフォーアフター!便利な擬似要素の使い方

web制作

ビフォーアフター!便利な擬似要素の使い方

前回、「便利なセレクタの使い方」で擬似要素をご紹介しましたが、今回はその中で::before, ::after擬似要素について便利な使い方をご紹介しようと思います。

まずはBoxの上に透明度を設定したBoxをのせる方法ですが、これを理解すれば色んなカタチで応用させることができます。

html

<div>赤</div>

css

div {
  position: relative; /*⇐ポジションをレラティブに*/
  width: 150px; /*⇐Boxの大きさを指定します*/
  height: 150px;
  background-color: red; /*⇐Boxの色を指定します*/
  color: #fff; /*⇐文字色を指定します*/
}
div::before { /*⇐before擬似要素の指定*/
  content: '青70%'; /*⇐beforeで入れる内容を指定します*/
  position: absolute; /*⇐ポジションをアブソリュートに*/
  top: 20px; /*⇐位置を指定します。ピッタリ重ねたいなら0を指定*/
  left: 20px;
  width: 100%; /*⇐Boxの大きさを指定します*/
  height: 100%;
  background-color: blue; /*⇐Boxの色を指定します*/
  opacity: 0.7; /*⇐透明度を指定します*/
  /*background-color: hsla(240, 100%, 50%, 0.7);*/
  /*⇑opacityでは文字まで透けてしまうので、Boxだけ透明にしたいときはrgbaかhslaで指定する。*/
}

それらを設定すると下記になります。

前回ご紹介した三角の作り方と組み合わせると「吹き出し」も作れますね。

ちなみにcounter-incrementプロパティを用いると、思い通りのリストスタイルを作成できます。

他にも、before,after擬似要素を用いたアイデアは沢山ありますので、詳しく勉強したい方は検索してみてください。