Question

我有一个位于容器中心的标题，并且我使用边框底部和伪元素绘制下划线，但是我不确定如何使下划线停在标题文本的结尾处。 / p>

我的标记：

.headerWrap {
  background: #0a1633;
  position: relative;
}

/* Trying to use this to mask the overflow */
.headerWrap:after {
  position: absolute;
  display: block;
  content: "";
  bottom: 0;
  left: 65%;
  right: 0;
  border-bottom: 10px solid #0a1633;
}

.header {
  margin: 0 auto 24px;
  text-align: center;
  font-weight: bold;
  position: relative;
  padding-bottom: 10px;
  color: #ff6347;
  border-bottom: 2px solid #ff6347;
  position: relative;
}

.header:before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin-bottom: 2px;
  content: "";
  border-bottom: 6px solid #ff6347;
}

<div class="headerWrap">
  <h3 class="header">Header</h3>
</div>

Answer 1

这里是一个没有多余元素的想法，将适用于任何内容。诀窍是依靠display:inline-block来实现缩小以适应的行为，并能够考虑文本的正确部分。然后我们可以简单地依靠左侧的溢出。

我将考虑使用多个背景来创建仅使用一个伪元素的行：

.headerWrap {
  background: #0a1633;
  text-align: center;
  overflow:hidden;
  margin:10px;
}

.header {
  margin: 5px 0 25px;
  font-weight: bold;
  position: relative;
  display:inline-block;
  color: #ff6347;
  position: relative;
}

.header:before {
  content:"";
  position: absolute;
  right: 0;
  top:100%;
  left: -100vw;
  height:10px;
  background:
    linear-gradient(#ff6347,#ff6347) top,
    linear-gradient(#ff6347,#ff6347) bottom;
  background-size:100% 6px,100% 2px;
  background-repeat:no-repeat;
}

<div class="headerWrap">
  <h3 class="header">Header</h3>
</div>

<div class="headerWrap">
  <h3 class="header">Another Header</h3>
</div>

Answer 2

让我们使用 flex 。

通过将容器（.headerWrap）设置为display: flex，您可以拥有自己的伪元素，以始终按自己的意愿在中间收缩内容（.header）。< br /> 从那时起，您只需要设置::before伪元素的样式，使其既可以得到两行，又可以为其内容设置样式，以使其也具有相同的两行，而无需::after进行样式设置。

.headerWrap {
  background: #0a1633;
  position: relative;
  display: flex;
  justify-content: center;
}

.header {
  text-align: center;
  font-weight: bold;
  position: relative;
  color: #ff6347;
  border-bottom: 6px solid #ff6347;
  position: relative;
  white-space: nowrap;
  flex: 0 1 0;
  height: 25px;
  padding: 0;
}
.headerWrap:before, .headerWrap::after {
  display: inline-block;
  content: "";
  flex: 1 0 0;
}
/* left lines */
.headerWrap:before {
  margin-top: 44px;
  border-top: 6px solid #ff6347;
  border-bottom: 2px solid #ff6347;
  height: 3px;
}
/* small horizontal line under text */
.header::before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 100%;
  margin-top: 34px;
  border-bottom: 2px solid #ff6347;
}

/* just to show you can change the content dynamically */
.hidden {
  display: none;
}
.headerWrap:hover .hidden{
  display: inline;
}

<div class="headerWrap">
  <h3 class="header"><span class="hidden">This is an </span>Header</h3>
</div>

这是一个更具动态性的版本，但使用了另一个环绕元素，以便我们可以将::before对齐到内容的基线上（以上版本使用硬编码的高度和边距顶部规则）

.headerContainer {
  display: flex;
  align-items: center;
  background: #0a1633;
}
.headerWrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 3em;
  color: #ff6347;
  flex: 1 0 0;
  padding: 1em 0;
}

.header {
  text-align: center;
  font-weight: bold;
  position: relative;
  position: relative;
  white-space: nowrap;
  flex: 0 1 0;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 2px solid;
}
.headerWrap:before, .headerWrap::after {
  display: inline-block;
  content: "";
  flex: 1 0 0;
}
/* left lines */
.headerWrap:before {
  border-top: 6px solid;
  border-bottom: 2px solid;
  height: 3px;
}
/* small horizontal line under text */
.header::before {
  content: '';
  position: absolute;
  display: inline-block;
  width: 100%;
  bottom: 3px;
  left: 0;
  border-bottom: 6px solid #ff6347;
}

/* just to show you can change the content dynamically */
.hidden {
  display: none;
}
.headerWrap:hover .hidden{
  display: inline;
}

<div class="headerContainer">
  <div class="headerWrap">
    <h3 class="header"><span class="hidden">This is an </span>Header</h3>
  </div>
</div>

Answer 3

如果您不介意使用jQuery，则可以执行以下操作：

var height= $('#test').height();
var width= $('#test').width();
var position= $('#test').position().left
var set= position+width + 'px';
$('<style>div.headerWrap:after{left:'+set+'}</style>').appendTo('body');

.position() .left用于获取x坐标，.width()用于获取元素宽度。并全部添加它们，使下划线停止在标题文本的结尾处。

然后添加$(window).on('resize', function(){}以检测窗口的大小。

摘要：

function count(){
  var height= $('#test').height();
  var width= $('#test').width();
  var position= $('#test').position().left
  var set= position+width + 'px';
  $('<style>div.headerWrap:after{left:'+set+'}</style>').appendTo('body');
}
count();

$(window).on('resize', function(){
      count();
});

.headerWrap {
  background: #0a1633;
  position: relative;
}

/* Trying to use this to mask the overflow */
.headerWrap:after {
  position: absolute;
  display: block;
  content: "";
  bottom: 0;
  left: 65%;
  right: 0;
  border-bottom: 10px solid #0a1633;
}

.header {
  margin: 0 auto 24px;
  text-align: center;
  font-weight: bold;
  position: relative;
  padding-bottom: 10px;
  color: #ff6347;
  border-bottom: 2px solid #ff6347;
  position: relative;
}

.header:before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin-bottom: 2px;
  content: "";
  border-bottom: 6px solid #ff6347;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="headerWrap">
  <h3 class="header"><label id="test">Header</label></h3>
</div>

Answer 4

如果您知道（计算）文本“ Header”的宽度，则可以这样做：（而且您不需要使用面罩。）

.headerWrap {
  background: #0a1633;
  position: relative;
}

.header {
  margin-top:0;
  margin-bottom:24px;
  text-align: right;
  font-weight: bold;
  position: relative;
  padding-bottom: 10px;
  color: #ff6347;
  border-bottom: 2px solid #ff6347;

  right:-webkit-calc(50% - 30px);
  right:-moz-calc(50% - 30px);
  right:calc(50% - 30px);
}

.header:before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin-bottom: 2px;
  content: "";
  border-bottom: 6px solid #ff6347;
}

<div class="headerWrap">
  <h3 class="header">Header</h3>
</div>

Answer 5

我创建了一个空的div，其背景颜色与填充相同底部，因此我们可以立即调整您需要的with

我更改了h3的属性，甚至可以根据需要使用div和自定义css来代替h3。

检查以下代码。

 .headerWrap {
      background: #0a1633;
      position: relative;
    }

    .header {
      margin-top:0;
      font-weight: bold;
      position: relative;
      color: #ff6347;
      text-align: center;
    }
  
  
  .inner {
    background-color: #ff6347;
    width: 54%;
    height: 0px;
    background-color: ff6347;
    padding-bottom: 5px;
}

h3{
    margin-block-start: 0em;
    margin-block-end: 0em;
}

    <div class="headerWrap">
      <h3 class="header">Header</h3>
      <div class="inner">&nbsp;</div>
    </div>

居中标头上的CSS伪元素下划线

5 个答案: