Как сделать так, чтобы тег :: 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;
}