エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
beforeとafter(cssの疑似要素)を使い倒す! その1 contentを使おう編
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
beforeとafter(cssの疑似要素)を使い倒す! その1 contentを使おう編
はじめに 見出しの頭に縦棒をつけたいけど、縦棒の長さを文字よりも短くしたい・・・ こんなときってあ... はじめに 見出しの頭に縦棒をつけたいけど、縦棒の長さを文字よりも短くしたい・・・ こんなときってありますよね。 そういったときにbefore!を使いましょう! 使い方 もともとの見出しがこいつだとすると。 ![image](//images.ctfassets.net/gyhdnnh1ztbe/7HiwEbgAwIlxAO0rdF8E9E/3970b275d421e61f2b0fbaf411300f8d/image.png) .midasi::before{ } こんな感じで指定します。 :(コロン)を2つつけるのはcss3の記法です。1つでもブラウザ対応してますが、2つのほうがかっこいいです(ぉ) 注意点 beforeにはcontentプロパティが絶対必要です。 文字を入れてみます。 .midasi::before{ content: "ビフォアだよん"; } ![image](//im