在 ` 后面添加一行<p> ` 標簽僅使用 CSS</p>

Question

我有這個代碼塊，它將使用附加到 wordpress 頁面的帖子元呈現列。 我需要在<p>標簽的內容之后添加一行。 我怎么能做到這一點？ 我試過使用::after但沒有成功。 我不是 css 的大師，因此我們將不勝感激。

<?php if( $post_meta['col-1'][0] ): ?>
  <div class="row m-0">
    <div class="col-sm-12 col-md-12 col-lg-12 col-background p-0" data-bg-url="<?php _e( $col1_image ); ?>">
      <div class="col-sm-12 col-md-5 col-lg-5 p-5" style="background-color:rgba(255,255,255,0.8)!important;height:100%;">
        <p class="lead text-center pt-5 mt-5"><?php _e( $post_meta['col-1'][0] ); ?>
      </div>
    </div>
  </div>
<?php endif; ?>

Answer 1

是的，您可以使用 CSS 偽元素，例如“:after”。

所以這里是你的 HTML，它基本上是 ap 標簽：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Duo Reges: constructio interrete. Non ego tecum iam ita iocabor, ut isdem his de rebus, cum L. Hoc ille tuus non vult omnibusque ex rebus voluptatem quasi mercedem exigit. Quis non odit sordidos, vanos, leves, futtiles?</p>

這是您的 CSS：

p {
  position: relative;
  max-width: 400px;
  text-align: center;
}

p:after {
  position: absolute;
  bottom: -20px;
  width: 50px;
  height: 3px;
  background: #000;
  content: "";
  display: block;
  left: 50%;
  transform: translatex(-50%);
}

一定要給你的偽元素：

• 顯示：塊/內聯塊；
• 設置寬度
• 設置高度
• 設置定位（絕對/相對 - 上/左/下/右）
• 內容： ””; （您將使用背景顏色來改變它的外觀）

這是一個工作現場筆： https://codepen.io/alezuc/pen/pojgePG

希望這可以幫助！