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

【问题标题】：How do I make the ::before tag only appear when content is entered?如何使 ::before 标记仅在输入内容时出现？
【发布时间】：2019-10-20 23:21:40
【问题描述】：

我正在用 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标签插入，但是没有使用标题的时候，还是出现了白线：

如果没有文字，如何让线条消失？

【问题讨论】：

标签： php css wordpress

【解决方案1】：

将:empty 伪选择器与:not 一起使用。这仅适用于标签内没有任何内容（cmets 除外）的情况：

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

【讨论】：