CSS下划线仅带有居中箭头的文本

格式问题...我无法执行它要求我使用jsfiddle链接执行的操作。

评论
  • nin
    nin 回复

    I hope this is what you need? if so then add display: inline-block; to the h2.

    h2 {
      line-height: 17px;
      padding-bottom: 15px;
      text-transform: uppercase;
      border-bottom: 2px solid #00a7a8;
      position: relative;
      display: inline-block;
    }
    
    h2:before {
      content: '\25bc';
      position: absolute;
      top: 100%;
      left: 5em;
      color: #00a7a8;
    }
    
    
    /* You can get quite a bit of control by adjusting the line-height of the pseudo-element */
    <h2>The Header Is Here</h2>
  • qullam
    qullam 回复

    您可以将h2设置为inline-block,然后将伪元素之前的位置更改为箭头的一半的负边距的50%,并且它将始终与标题长度居中对齐

    h2 {
    line-height: 17px;
    padding-bottom: 15px;
    text-transform: uppercase;
    border-bottom: 2px solid #00a7a8;
    position: relative;
    display:inline-block;
    }
    h2:before {
        content: '\25bc';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left:-12px;
        color: #00a7a8;
    }
    <h2>The Header Is Here</h2>