1

也许这已经被回答过，但我还没有找到一个合适的解决方案来解决我关于 SO 的问题。

好的，这里是：

我需要h3用 100% 的标签下划线，除了实际文本所在的部分。像这样：

我的超级头衔 ____________________________________________________

这必须是 100% 宽度，所以像

h3:after {
        content:"\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
}

使用固定数量的空格将不起作用。

标签也必须是pure。这意味着它没有被DIV或span等包围......（用户从所见即所得提交的内容）它只是一个h3标签。

这在css3中可能吗？如果没有，我愿意添加一些 js 使其工作。

更新：

这是带有预期结果的屏幕截图：

在此处输入图像描述

4

4 回答 4

5

你可以这样尝试：

标记

<h3>A 100% wide title</h3>

CSS

h3 {
  display: block;
  width: 100%;
  background: #fff;  
  white-space: nowrap;
  overflow: hidden;
}

h3:after {
  content: "";
  display: inline-block;
  width: 100%;
  margin-left: .5em;
  border-bottom: 1px #767676 solid;
}

示例：http ://cdpn.io/Awpef

产生的效果

在此处输入图像描述

于 2013-10-25T10:00:07.673 回答
0

像这样？演示

    h3:after {
    content:"";

    border-bottom: 1px solid black;
    overflow: hidden;
    width: 100%;
    display: inline-block;
    position: relative;
    left: 150px;
    top: -20px;

}
于 2013-10-25T09:59:31.120 回答
0

尝试这个：

CSS

h3 {
    display:block;
    width:100%;
    overflow: hidden;
    position: relative;
}
h3:after {
    content:'';
    border-bottom:1px solid black;
    position: absolute;
    width: 100%;
}

JSFIDDLE

于 2013-10-25T10:01:47.507 回答
0

不使用:after伪元素，你可以这样做：

<div id="wraptitle"><h3>A Second Title</h3></div>

CSS

#wraptitle {
    border-bottom : 1px solid black;
    position : relative;
}

#wraptitle h3 {
    display : inline;
    position : relative;
    bottom : 0;
    border-bottom : 1px solid white; /* white is actually the background color */
    padding-right : 10px;
}

确保h3元素的边距设置为0，否则它的边框不会越过它。

可以在这里看到一个活生生的例子：http: //jsfiddle.net/JYNn5/

于 2013-10-25T10:14:10.020 回答