PC、スマホ

:after、:beforeの疑似要素をインラインスタイルで直接htmlに記述する方法

更新日:

ワードプレスを運用していて、どうしてもCSSを使わずに、htmlに直接記載したいことがあったのですが、ググっても全然やり方のってなかったので、備忘録。

今回は吹き出しCSSを例にします。

これがhtml

<div>これは吹き出しです。</div>

これがCSS

div:after {
	ここに三角のCSSを記載する
}

ところが、inlineCSSを直接htmlに書くことができません。

<div style="?????">これは吹き出しです。</div>

で、どうすればいいかぐぐったら、以下のような回答があります。

なぜ疑似要素を、わざわざ直接htmlに書きたいんですか?意図がわかりません。

冷たいですね。初心者にとっては、あなたの言っている意図がまったくわかりません。

でいろいろ調べたところ。。

どうやら、:afterとか:beforeとかって「疑似要素」と呼ばれるもので、htmlには書いていないdivタグとかを、CSS上で擬似的に再現する記述なんだそうです。

つまりこういうことです。

<div>これは吹き出しです。</div>

これに対して

div:after {
	ここに三角のCSSを記載する
}

これを記述することで、

<div><div style="ここが:afterの内容"></div>これは吹き出しです。</div>

こういう状態を擬似的に作り出すことができるのが、:afterとか:beforeがやってることなんです。

なので、htmlに直接:afterとか:beforeを書きたい場合は、単純に擬似要素じゃなくてdivとかで要素を追加しちゃえばいいんです。

わかっていただけましたかね??

ためになったと思ったら、リツイートとかしてくれると嬉しいです。

もしわかりにくかったら、コメントいただければできる範囲で回答いたしますので、お気軽にどうぞ。

-PC、スマホ

記事に関するご質問や不明点など、お気軽にコメント下さい。m(_ _)m


comment

24時間以内を目処に反映されます。

関連記事

特定の記事のタクソノミーのターム(カテゴリ)をショートコードで表示する方法【WordPress】

更新日:2017/08/31   -PC、スマホ

ソフトバンク通信障害は予知されていた!?ソフトバンクCMに伏線があったと話題に

更新日:2018/12/10   -PC、スマホ

【簡単】カスタム投稿にカテゴリを追加する方法

更新日:2017/08/31   -PC、スマホ

Evernote for macで文字数をカウントする方法

更新日:2018/03/22   -PC、スマホ
 

【複数可】カスタム投稿でタクソノミー(カテゴリ)で条件分岐して、一覧表示する方法

更新日:2017/07/11   -PC、スマホ

特定の記事のカスタムフィールドを表示するショートコードの作り方【WordPress】

更新日:2017/07/07   -PC、スマホ

【保存版】エクセルの「テーマの色」のRGBカラー早見表!「標準の色」もあり!

更新日:2018/03/07   -PC、スマホ

macのcsv文字化けをショートカットキーで直す方法

更新日:2018/02/20   -PC、スマホ

【簡単】プラグインなしでカスタム投稿タイプを追加する方法

更新日:2017/07/07   -PC、スマホ

macでダウンロードしたCSVの文字化けを右クリックから一発で修正する方法【Automator初心者向け】

更新日:2018/02/10   -PC、スマホ

コセケン

コセケン

Vegan情報について書いていきます!

その他、普段生活していて、困ったことや気になったことも書いていきます!
こんなこと調べてほしい。みたいなコメントもいただければ嬉しいです♪