底部边框小于宽度的标题

Question

我需要创建一个下划线效果,其底部边框小于h2标题的宽度.通常我不上传图片,但我认为它可能有助于进一步解释这个问题:

Answer 1

你可以使用伪元素.(例)

.pseudo_border {
    position:relative;
    display:inline-block;
}
.pseudo_border:after {
    content:'';
    position:absolute;
    left:0; right:0;
    top:100%;
    margin:10px auto;
    width:50%;
    height:6px;
    background:#00f;
}

只需相对于父元素绝对定位一个伪元素.其定位100%从top和使用的组合left:0; right:0和margin中auto的水平居中.相应地修改元素的高度/宽度并更改margin-top间距.

Answer 2

其他方法：

具有负传播半径的框阴影：

body{text-align:center;}
h2{
  font-size:40px;
  color:#409FB3;
  display:inline-block;
  height:50px;
  box-shadow: 0 25px 0 -23px #5CC7A8;
}

<h2>Some title</h2>

注意：您需要确保- spread-radius x2 < height否则 box-shadow 将具有 0 高度并消失。