如何使:: 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;
}