php - 如何使::before 标记仅在输入内容时出现？

Question

我正在 WordPress 中构建一个网站。有些页面有标题横幅，有些则没有。

在 header.php 文件中我插入了以下代码:

<div class="featured-image">
 <?php if ( has_post_thumbnail()) : ?>
  <?php the_post_thumbnail(); ?>
 <?php endif; ?>
 <?php if ( is_front_page()): ?>
  <span class="home-header-title"><h1><?php echo event_title(); ?></h1></span>
  <span class="tag-line"><?php the_field('tag_line'); ?></span>
  <span class="date-time-header"><?php the_field('date_time_header'); ?></span>
    <?php $ticket = get_field('ticket_url');
    if( $ticket ): 
    $ticket_url = $ticket['url'];
    $ticket_title = $ticket['title'];
    ?>
    <a class="ticket-banner-button" href="<?php echo esc_url($ticket_url); ?>"><?php echo esc_html($ticket_title); ?></a>
    <?php endif; ?>
    <?php else: ?>
     <span class="page-header-title"><h1><?php the_field('page_header'); ?></h1></span>
     <span class="sub-header"><?php the_field('sub_header'); ?></span>
  <?php endif;?> 
</div>

CSS:

.page-header-title h1 {
    font-weight: bold;
    font-family: 'Raleway', sans-serif;
    font-size: 60px;
    position: absolute;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    width: 100%;
}

.sub-header::before {
    content: " ";
    border: 1px solid #fff;
    display: block;
    width: 200px;
    margin: 14px auto;
}

.sub-header {
    font-family: museo-sans, sans-serif;
    font-weight: 500;
    position: absolute;
    font-size: 30px;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1.4;
}

设计的文本之间有线条(如下所示)。

我已经使用了::before标签插入，但是当没有使用标题时，仍然出现白线:

如果没有文本，如何让该行消失？

Answer 1

使用 :empty 伪选择器和 :not。仅当标签内没有任何内容(注释除外)时，这才有效:

.sub-header:not(:empty)::before {
    content: " ";
    border: 1px solid #fff;
    display: block;
    width: 200px;
    margin: 14px auto;
}