Question

我正在使用伪元素为我的标头标签创建装饰。我使用::before添加了一行，使用::after添加了一个圆圈。我现在通过硬编码值来定位它。因此，当屏幕宽度发生变化时，元素的位置会发生变化。

＆＃13;

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

＆＃13;

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

＆＃13;

请帮助我：

使伪元素的位置响应屏幕宽度，使其始终位于header标记内容的中间位置。
如果可能，根据header标记

另外请告诉我是否可以在伪元素中添加动画，例如从中间的圆圈两侧散布的线条。

修改这个问题是关于伪元素的定位。被标记为原始的那个没有解决关于伪元素的任何事情。但是，该问题的答案之一告诉我们如何使用伪元素。但我正在寻找一个随尺寸扩大的产品。

Answer 1

更改一些CSS

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

.section-header::before {
  background: #222222;
  content: "";
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -20px;
  width:100%;
}

.section-header::after {
  background: #b4a28f;
  border: 5px solid #fff;
  border-radius: 20px;
  content: "";
  height: 24px;
  left: 50%;
  position: absolute;
  margin-left:-12px;
  width: 24px;
  bottom: -30px;
}

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;
  position: relative;
}

.section-header::before {
  background: #222222;
  content: "";
  height: 1px;
  position: absolute;
  left: -25%;
  bottom: -20px;
  width:150%;
}

.section-header::after {
  background: #b4a28f;
  border: 5px solid #fff;
  border-radius: 20px;
  content: "";
  height: 24px;
  left: 50%;
  position: absolute;
  margin-left:-12px;
  width: 24px;
  bottom: -30px;
}

<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>
      </br>
      <h3 class="section-header">About Us About Us</h3>
    </div>
  </div>
</div>

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

定位响应屏幕宽度和父级的伪元素

1 个答案: