Q&A
何が知りたいのかがよくわからないのですが、知りたいことをもう少し詳しく記述していただけませんか？(オレンジ色ボタンのどういう表現の仕方がわからなかったのか、など)
こんにちは。
HTML/CSSを主に独学している初心者です。
そろそろ模写コーディングをしたいなと思い
https://www.try110.com/bousai_kawara/
このサイトを模写してみようと思いました。
そこで質問です。
オレンジ色ボタンで
鶴弥コーポレートサイトへ と 資料請求のボタンがあると思いますが、
表現の仕方がわからないのでソースを見てみたところ、
::before
"鶴弥コーポレートサイトへ"
::after
と、なっています。
調べたところ、CSSでは文頭にbefore、文末にafterを使い文字を入れることができるということがわかりました。
が、きっとそれとは違うと思います。
ご教授お願い致します。
質問者さんの文章には疑問文がないんですが、質問って言葉の意味わかります？
回答1件
0
ベストアンサー
::beforeのようなものは疑似要素といいます。
参考：
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements
恐らく「調べたら"文字を入れる為のもの"と出てきたのに、文字が入っていない」と困惑されているのだと思いますが、正確には"文字を入れる為のもの"ではなく、"選択した要素の子要素として擬似的に要素を作成するもの"です。
そのため、必ずしも文字を入れなければならないわけではありません。
contentというプロパティに値を入れることで文字を挿入できますが、今回はcontent: '';で空になっているのが分かると思います。
このサイトの場合は疑似要素を使ってボタンの子要素として6px四方の正方形を作り、topとrightの2辺のみ1pxのborderを設定して、それをtransformで45度傾けることによってaタグの文章の前に「>」マークのようなものを配置しているみたいです。
ただ、この場合は無理に疑似要素を使わなくても同じようなものが作れます。
サンプル：
https://jsfiddle.net/8dfqaj70/
投稿2019/10/19 16:16
総合スコア360
あなたの回答
tips
プレビュー
