Question

在文字底部添加小border的最佳方式是什么？

border必须居中且最大20px，但文字可能很长，甚至200px.

所以就像：

<h1>This text can be longer than the border</h1>
<style>
.h1 {border-bottom:8px solid #000;}
</style>

我应该在div之后添加h1并为其设置最大尺寸吗？

Answer 1

你可以使用伪元素::after并使用left:50% / transform:translateX(-50%)在中间对齐，无论width

h1 {
  position: relative;
  display:inline-block;
  /* min-width:200px */
}
h1::after {
  border-bottom: 1px solid red;
  bottom: -10px;
  content: "";
  height: 1px;
  position: absolute;
  width: 20px;
  left:50%;
  transform: translateX(-50%);
}

<h1>This text can be longer than the border</h1>

Answer 2

将线性渐变用于背景：

或者您也可以使用linear-gradient背景图片执行此操作。使用梯度的优点是它不需要任何可用于其他目的的额外伪元素。边框的厚度基于Y轴中的background-size，边框的宽度基于X轴的大小。 background-position属性用于居中边框。

缺点是与伪元素相比，linear-gradient的浏览器支持相对较差。仅在IE10 +中支持渐变。

h1 {
  display: inline-block;
  padding-bottom: 4px; /* to give some gap between text and border */
  background: linear-gradient(to right, black, black);
  background-repeat: no-repeat;
  background-size: 20px 2px;
  background-position: 50% 100%;
}

<h1>This text can be longer than the border</h1><br>
<h1>Some text with lesser length</h1><br>
<h1>Some text</h1>

使用伪元素：

您可以使用伪元素执行此操作。通过添加一个20px width的伪元素，绝对定位我们将能够产生所需的效果。 left: 50%，translateX(-50%)用于将伪元素定位在中心。伪元素的height确定边框的厚度，而background确定边框的颜色。

优点是浏览器支持，因为它应该在IE8 +中工作。

h1 {
  position: relative;
  display: inline-block;
  padding-bottom: 4px; /* to give some gap between text and border */
}
h1:after {
  position: absolute;
  content: '';
  left: 50%;
  bottom: -2px;
  width: 20px;
  height: 2px;
  background: black;
  transform: translateX(-50%);
}

<h1>This text can be longer than the border</h1>
<br>
<h1>Some text with lesser length</h1>
<br>
<h1>Some text</h1>

Answer 3

改善answer的dippas，您可以看到当您使用更大的宽度时，after元素的边框是无效的。您可以使用calc(50% - 100px);而不是50％来阻止此问题，而100px是after元素宽度的一半。

＆＃13;

.bottom-border {
  position: relative;
  display:inline-block;
}

.bottom-border::after {
  border-bottom: 2px solid red;
  bottom: -10px;
  content: "";
  height: 1px;
  position: absolute;
  width: 200px;
  left: calc(50% - 100px);
  transform: translateY(-50%);
}

＆＃13;

<p class="bottom-border">
  Hi, i am a quite long text, might be 200px, probably more i guess, but nobody knows really.
</p>

＆＃13;

边框底部固定大小

3 个答案: