web-dev-qa-db-ja.com

ボタンに：after疑似要素を含めることはできますか？

ボタンがあり、ホバーに後の要素を表示したい。しかし、私はそれを見ることができません。ボタンに：after要素を含めることは可能ですか？

html：

<button class="button button-primary">My button</button>

css：

.button {
  cursor: pointer;
  height: 30px;
}

.button-primary {
  border: none;
}
.button-primary:hover:after {
  display: block;
  position: relative;
  top: 3px;
  right: 3px;
  width: 100px;
  height: 5px;
}
htmlcsspseudo-element
12
user1386906

これは、すべての最新のブラウザで動作するはずです。

これを機能させるには、afterにcontent:"";を追加する必要があります。

15
Albzi

はい、使用できます–非常に古いブラウザをサポートする必要がない限り、たとえばMS IE 7以下。空のHTMLタグの疑似要素を理解できない他のブラウザは知りません。実際、私はすでにいくつかの本番サイトで問題なく使用しています。

0
feeela