php - 如何使 ::before 标记仅在输入内容时出现?
问题描述
我正在用 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 标签插入了,但是当没有使用标题时,仍然出现白线:
如果没有文字,我如何让线路消失?
解决方案
将:empty
伪选择器与:not
. 这仅在标签内没有任何内容(注释除外)时才有效:
.sub-header:not(:empty)::before {
content: " ";
border: 1px solid #fff;
display: block;
width: 200px;
margin: 14px auto;
}
推荐阅读
- asp.net - 为什么我得到 System.NullReferenceException: Object reference not set to an instance of an object?
- javascript - 如何自定义 react-show-more 或 less 文本到 Material-UI 图标
- python - 如何删除python列表中的字典?
- python - 如何解决此错误 [ModuleNotFoundError: No module named 'django.utils.inspect']
- javascript - 多次请求后同步请求
- html - CSS悬停问题(覆盖)
- django - 如何用间接相关的表注释查询集?
- sql-server - 如果上一次运行失败,则重新运行 SQL Server 作业
- amazon-ec2 - 无法连接到我在 AWS EC2(Windows)上的服务器
- flutter - 链式异步方法不会在带有 FutureBuilder 的 Widget 中显示结果