Question

我想强调我的头衔只有50％。这是我的代码，尝试使用border-bottom。

h1{
  font-size:50px;
  font-weight: bold;
  border-bottom: 5px solid blue;
}

<div>
  <h1>TITLE</h1>
</div>

Answer 1

您可以使用span或:before元素制作另一个元素。基本上我们制作一个50％宽，5px高的元素，并将它放在底部的绝对位置：

＆＃13;

h1{
    position: relative;
    display: inline-block; /* Header are 100% width by their default block behaviour */
}
h1:before{
    position: absolute;
    height: 5px;
    width: 50%;
    left: 0;
    bottom: 0;
    background: blue;
    display: block;
    content: "";
}

＆＃13;

<h1>I am a pretty header</h1>

＆＃13;

您可以执行<h1>Pretty header text <span></span></h1>并将:before替换为css中的>span，但通过唱before，您可以在样式表和HTML清除器中保留样式。

Answer 2

您可以使用::after伪元素，但您必须让h1 inline-block停止它跨越父级的整个宽度。

使用::after而不是::before意味着您不必使用任何absolute定位。

h1 {
  font-size: 50px;
  font-weight: bold;
  display: inline-block;
}

h1::after {
  content: "";
  display: block;
  width: 50%;
  height: 5px;
  background-color: blue;
}

<div>
  <h1>TITLE</h1>
</div>

您也可以使用margin: 0 auto;

对边框居中

h1 {
  font-size: 50px;
  font-weight: bold;
  display: inline-block;
}

h1::after {
  content: "";
  display: block;
  width: 50%;
  height: 5px;
  background-color: blue;
  margin: 0 auto;
}

<div>
  <h1>TITLE</h1>
</div>

或向右......

h1 {
  font-size: 50px;
  font-weight: bold;
  display: inline-block;
}

h1::after {
  content: "";
  display: block;
  width: 50%;
  height: 5px;
  background-color: blue;
  margin: 0 0 0 auto;
}

<div>
  <h1>TITLE</h1>
</div>

Answer 3

您希望它强调文本的50％或宽度的50％吗？

要强调总宽度的50％，只需将元素的宽度设置为50％：

＆＃13;

h1{
  font-size:50px;
  font-weight: bold;
  border-bottom: 5px solid blue;
  width: 50%;
}

＆＃13;

<div>
  <h1>TITLE</h1>
</div>

＆＃13;

为了使其下划线50％的TEXT，你必须使用一点点tricker CSS。您必须在title元素中创建一个元素并将其设置为内联块，因此它只与文本本身一样宽。然后使用另一个元素创建边框，该元素的大小是文本元素的50％（也是内联块）。最简单的方法是在h1中使用div。

＆＃13;

h1 {
    display: inline-block;
    position: relative;
}
.line {
  position: absolute;
  display: inline-block;
    width: 50%;
    border-bottom: 1px solid blue;
}

＆＃13;

<h1>
  TITLE
  <div class="line"></div>
</h1>

＆＃13;

开始看起来像是对的。但额外的div元素有点混乱。

如果您希望在没有额外div的情况下实现此目的，则可以使用css：after选择器自动生成元素，如下例所示：

＆＃13;

h1 {
    display: inline-block;
    position: relative;
}
h1::after {
  position: absolute;
  display: inline-block;
    width: 50%;
    border-bottom: 1px solid blue;
    content: "";
}

＆＃13;

<h1>TITLE
</h1>

＆＃13;

Answer 4

希望有所帮助

＆＃13;

h1{
  font-size:50px;
  font-weight: bold;
  position:relative;
}
h1:after{
  content:"";
   position:absolute;
   border: 2px solid blue;
   width:75px;
   bottom:-5px;
   left:0px;
}

＆＃13;

<div>
  <h1>TITLE</h1>
</div>

＆＃13;

Answer 5

希望这会有所帮助：

＆＃13;

json

＆＃13;

正好强调了我文本的50％

5 个答案: