読者です 読者をやめる 読者になる 読者になる

【css】擬似クラス・擬似要素(:before,:afterみたいな)のインラインで書いてみる

はじめに

最近昔からずっと苦手だったcssをいじる機会が多くて四苦八苦しています。
とはいえアプリ開発してから少しは免疫がつきました(まだまだ全然低レベルですが・・・)

で、今回やりたいことは全然よくないことなんですけど、実現したい画面があって理解してないけどコピペで使いたいけど使うのにすら手こずった時の話になります。

hoge:before {
    ・・・
}

みたいなのを自分のシステムにいれたかったのですが、今回は理由あってhtmlにidやclassをつけることができませんでした。

実装

参考にしたサイト

html
<div class="wrapper">
  <img src="・・・"/>
</div>

css
.wrapper:before {
  content:"";
  display:block;
  padding-top 75%;
}

こんな感じでした。でインラインで書くとこんな感じ

<div>
  <div style='content:""; display: block; padding-top: 75%;'></div>
  <img src="・・・"/>
</div>

直感的にdivの上にくる感じなんだけどこうなるんですね。
afterだったらの下にきます

とりあえずこんなんでも覚えておくと便利なのでメモしておきました
以上です