0

CSS では常に :before を使用して、コンテンツをセレクターの前に置くことを意味してきました。これで問題が発生したことは一度もありませんが、セレクターの :before が要素の前に来るのではなく、要素の内側に追加されている場所を混乱させるものに出くわしました。なぜそうなのかわかりません。

ここにフィドルがあります：http://jsfiddle.net/vMtct/1/

そして、ここに基本的なコードがあります：

<div class="block">
  <p>But this &lt;p&gt; will have content <em>before</em>.</p>
</div>

.block {
  margin: 0 auto;
  width: 250px;
  height: 250px;
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 50px; }
.block:before {
  background: #eeeeee;
  content: "Here is something that print's inside the selector";
  display: block;
  padding: 20px;
  margin-bottom: 20px; }
p:before {
  display: block;
  content: ">>>"; }
4

1 に答える 1

5

:beforeと:afterは疑似要素であり、実際には DOM に追加されません。それらは要素のコンテンツの前に挿入されます。

<input />したがって、やのような「空の」（自己閉鎖）要素では機能しません<img/>。

ただし、これらの疑似要素を、適用されている要素の「外側」に表示するには、ここに示すように絶対位置に配置します: http://jsfiddle.net/vMtct/2/

于 2013-07-10T22:13:15.977 に答える