web-dev-qa-db-ja.com

疑似要素がコードに表示されなかった後

After疑似要素を使用して、サイトにいくつかの効果を追加しようとしています。

<div class="product-show style-show">
  <ul>
    <li>
      ....
      <div class="...">
        <div class="readMore less">...</div>
        <a href="3" class="readMoreLink" onclick="return false;">Read More</a>
      </div>
      ....
    </li>
  </ul>
</div>

そしてスタイルシート：

.product-show .readMore.less {
   max-height: 200px;
   height: 100%;
   overflow: hidden;
}

.product-show .readMore.less:after {
   background: rgba(255, 255, 255, 0);
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 30px;
 }

.product-show .readMore.lessのスタイルが適用されているのがわかりますが、Chrome（Chrome $ ===（Chrome $ ===（Chrome $ ===（最新バージョン）/ MacOS。古いブラウザで問題が発生することがあると読みましたが、スタイルを正しく定義していれば、少なくとも:: after疑似要素表記が表示されるはずだと思いました。何が問題なのですか。

htmlcsspseudo-elementcss-content
14
Ji Mun

これは、疑似要素 content値が省略されている場合は生成されない （初期/デフォルト値がnoneであるため）であるためです。

疑似要素を生成するには、content値を指定します。 ''の値で十分です。

.product-show .readMore.less:after {
    content: '';
    background: rgba(255, 255, 255, 0);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
}
19
Josh Crozier

MDNによると：

Content CSSプロパティは、:: beforeおよび:: after疑似要素とともに使用され、要素にコンテンツを生成します。

これは、contentプロパティを含めないと、:afterまたは:before要素がまったく表示されないことを意味します。

次の行をコードに追加します。

content: ""; // Leave this empty

そして、それが結果にどのように影響するかを見てください。

注として、通常、:beforeまたは:after要素を使用してテキストを表示する場合は、contentプロパティにテキストを追加します。ただし、多くの場合、単に空のままにしていることに気付くでしょう。

8
Lucas