CSS擬似要素_html/css_WEB-ITnose使用時の注意点

疑似要素 ::before、::after

1. 一部の要素は ::before、::after をサポートしていません

• IE でサポートされていない要素は、img、input、select、textarea です。
• FireFox は要素: input、select、textarea をサポートしていません。
• Chrome でサポートされていない要素は、input[type=text]、textarea です。

2. content 属性を設定する必要があります

設定されていない場合、疑似要素は表示されません。コンテンツの内容を設定したくない場合は、コンテンツを空に設定できます。例:

.a:before {    content: '';    display: block;    width: 100px;    height: 100px;    background-color: red;}

3. コンテンツの属性値はいくつかの規則に従う必要があります

次の規則に従う必要があります:

• content の値が定数の場合は、一重引用符または二重引用符で囲む必要があります。例: content:'abc' 、 content:"abc";。
• content の値が要素の属性と定数の組み合わせである場合、定数は引き続き一重引用符または二重引用符で囲み、間にプラス記号を付ける必要はありません。例: content: '('attr(title)')';。この書き方は私の直感に反するような気がします。

コンテンツの属性値が上記の要件を満たしていない場合、擬似要素は表示されません。

4. コンテンツの属性値に特殊文字を設定するにはどうすればよいですか?

次の表に示すように: