【问题标题】:CSS underline less than width of headline? [duplicate]CSS下划线小于标题的宽度? [复制]
【发布时间】:2014-06-23 12:54:10
【问题描述】:

是否可以使用 CSS 使标题的下划线小于标题文本的宽度?我有以下 H1 标题样式:

h1 {
  font-weight: 300;
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px #d2202f solid;
}

这会在我的 H1 标题下方产生一条细红色下划线。但是,是否有可能使下划线占标题文本的 50%?

【问题讨论】:

  • 对不起,我搜索了几个短语,没有找到类似的。

标签: css underline


【解决方案1】:

您可以使用带有:before(或:after)的伪元素:

h1 {
    font-weight: 300;
    display: inline-block;
    padding-bottom: 5px;
    position: relative;
}
h1:before{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    bottom: 0;
    left: 25%;
    border-bottom: 1px solid red;
}

http://jsfiddle.net/9e27b/

【讨论】:

  • 不能处理多行文本...
  • 对于多行:内容:'';底部:0;左:30%;对:30%;高度:2px;背景:红色;显示:块;宽度:50%;位置:静态;左边距:25%;
【解决方案2】:

是和不是。

普通边框无法做到这一点,但您可以使用 CSS3 渐变边框来伪造它。

见:CSS3 Gradient Borders

【讨论】:

  • 请稍微提高答案质量,也许有一些例子。我不能投票赞成删除,因为它还不够糟糕,但也不够好。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-12-25
  • 1970-01-01
  • 2021-12-03
  • 2012-08-27
  • 2013-08-02
相关资源
最近更新 更多