gpt4 book ai didi

html - 根据屏幕宽度和父元素定位伪元素

转载 作者:行者123 更新时间:2023-11-28 15:35:55 25 4
gpt4 key购买 nike

<分区>

我正在使用伪元素为我的 header 标签创建装饰。我使用 ::before 添加了一条线,使用 ::after 添加了一个圆圈。我现在通过对值进行硬编码来定位它。因此,元素的位置会随着屏幕宽度的变化而变化。

body {
font-family: 'Raleway', sans-serif;
height: 100%;
width: 100%;
background-color: #f5f0e7;
}

.section-header {
font-family: 'Lobster', cursive;
display: inline-block;
margin-bottom: 30px;
}

.section-header::before {
background: #222222;
content: "";
height: 1px;
position: absolute;
width: 150px;
left: 42%;
bottom: 25%;
}

.section-header::after {
background: #b4a28f;
border: 5px solid #fff;
border-radius: 20px;
content: "";
height: 24px;
left: 49%;
position: absolute;
width: 24px;
bottom: 10%;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<div class="container" style="padding-top: 100px;">
<div class="row">
<div class="col-md-12" style="text-align: center;">
<h3 class="section-header">About Us</h3>
</div>
</div>
</div>

请帮我:

  1. 使伪元素的位置响应屏幕宽度,使其始终位于 header 标记内容的中间。
  2. 如果可能,根据 header 标签的内容扩展 before 元素的宽度

另外请告诉我是否可以向伪元素添加动画,例如从中间的圆圈向两侧展开的线。

编辑:这个问题是关于伪元素的定位。标记为原始的那个不涉及任何关于伪元素的内容。但是,该问题的答案之一说明了如何使用伪元素。但我正在寻找一个随尺寸增大的。

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com