こんにちは、株式会社ナレッジワークの@nakajmgです。 今回はChrome 127 betaの機能紹介を見て「こんなのあったの?」となった、擬似要素に代替テキストをつける機能について紹介します。 /で区切って代替テキストが指定できる ::beforeや::afterのcontentプロパティは、/区切りで代替テキストが指定できます。
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
前回の記事【初心者向け】CSSセレクタとは?セレクタの種類や指定方法を解説!(基礎編)ではCSSセレクタの基本的な知識と指定方法をご紹介しました。 今回は、よりコーディングの幅が広がる「擬似要素」と「擬似クラス」に関して解説していきます。 擬似要素とは ~擬似要素の適用例~ 擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTMLの要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。 例として、下図のように見出しの先頭一文字のみ文字の色を変える装飾を実装してみましょう。 擬似要素を使わない場合 擬似要素を使わずにこれを表現すると、HTMLとCSSの記述は下記のようになります。 見出し要素のh2の一文字目のみをspanタグで囲い、スタイルを適用しています。 この方法でも装飾は可能ですが、テキストをspanタグで無理やり区切って
ここでは、input要素でボタンに擬似要素を適用させたい方が参考になりそうなお話をします。結論から言うと、input要素に疑似要素は適用できません。 例えば、リンクタグならこういうデザインが素直に作れるわけですが(疑似要素で右に矢印を入れています)。 See the Pen button01 by kenichi (@ken81) on CodePen. HTML <a href="#" class="button">申込み</a> CSS a.button { display: block; margin:0 auto; text-decoration: none; border: none; outline: 0; cursor: pointer; color: #fff; background: #555; font-weight: bold; position: relative;
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く