How do I make the ::before tag only appear when content is entered?

user_7187848 0
Viewed 43

I'm building a website in WordPress. Some pages have a heading banner and some don't.

In the header.php file I have inserted the below code:

<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>

The 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;
}

The designs have lines in between the text (as below).

enter image description here

I have used the ::before tag to insert, but when no heading is used, the white line still appears:

enter image description here

How do I have the line go away if there is no text?

wordpress css php
1 Answers

Use the :empty pseudo-selector with :not. This only works if there's nothing (except comments) inside the tag:

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