在标题标签上显示底部边框的最佳方法是什么？

Question

我有三个带有标题的段落，每个标题都有一个边框底部，位于左侧。

我使用h2:after{//CSS here }来显示边框。我使用left: 13.5%;作为第一个标题在左侧显示边框。我可以使用左边：25％表示第二个和左边：39％表示最后一个标题显示边框但我知道这不是很好的展示方式。因为如果我以前喜欢这个，那么我必须使用所有设备的媒体查询来设置边框。

我想知道哪个是使用边框底部的最佳方式，所有都显示在左侧。

获取输出

我需要输出

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  width: 1170px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.heading {
  margin-top: 20px;
  margin-bottom: 30px;
}

.heading h2 {
  font-size: 50px;
  text-align: center;
}

.heading h2 span {
  color: #0000ff;
}

.heading h2:after {
  content: "";
  border-bottom: 4px solid #E43D32;
  content: ' ';
  position: absolute;
  display: block;
  width: 100px;
  left: 13.5%;
  transform: translateX(-13.5%);
  padding-top: 10px;
}

＆＃13;

<div class="container">
  <div class="par_1">
    <div class="heading">
      <h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <div class="par_2">
    <div class="heading">
      <h2><span>Lorem ipsum</span>dolor sit amet</h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <div class="par_3">
    <div class="heading">
      <h2><span>dolor sit amet</span></h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需将其应用于跨度而不是h2，无需指定左侧的特定值，只需将其设为0并将底部设为0（或任何负值，如果您希望它更低）

[不要忘记position:relative跨度]

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  width: 1170px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.heading {
  margin-top: 20px;
  margin-bottom: 30px;
}

.heading h2 {
  font-size: 50px;
  text-align: center;
}

.heading h2 span {
  color: #0000ff;
  position:relative;
}

.heading h2 span:after {
  content: "";
  border-bottom: 4px solid #E43D32;
  content: ' ';
  position: absolute;
  display: block;
  width: 100px;
  left: 0;
  bottom:0;
  padding-top: 10px;
}

<div class="container">
  <div class="par_1">
    <div class="heading">
      <h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <div class="par_2">
    <div class="heading">
      <h2><span>Lorem ipsum</span>dolor sit amet</h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <div class="par_3">
    <div class="heading">
      <h2><span>dolor sit amet</span></h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

</div>

Answer 2

您应该将pseudo element :after放在span中，因为它涵盖了标题文字的确切宽度。然后你应该给你的跨度相对定位，这样它就会成为它的父级。然后给它一个0％的左定位，这样它就会与左边对齐。您的代码应如下所示。

＆＃13;

＆＃13;

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  width: 1170px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.heading {
  margin-top: 20px;
  margin-bottom: 30px;
}

.heading h2 {
  font-size: 50px;
  text-align: center;
}

.heading h2 span {
  color: #0000ff;
  position: relative;
}

.heading h2 span:after {
  content: "";
  border-bottom: 4px solid #E43D32;
  content: ' ';
  position: absolute;
  display: block;
  width: 100px;
  left: 0;
  padding-top: 10px;
}

＆＃13;

<div class="container">
  <div class="par_1">
    <div class="heading">
      <h2><span>Lorem ipsum </span>Lorem ipsum dolor sit amet</h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <div class="par_2">
    <div class="heading">
      <h2><span>Lorem ipsum</span>dolor sit amet</h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

  <div class="par_3">
    <div class="heading">
      <h2><span>dolor sit amet</span></h2>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;