Question

也许这已经得到了回答，但我没有找到适合我的问题的解决方案。

好的，这里是：

对于实际文本所在的部分，我需要为h3标记加下100％EXCEPT。像这样：

我的超级冠军 ____________________________________________________

这必须是100％宽度，所以类似

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

带有固定数字空格的

不起作用。

标签也必须是纯。意思是它没有被DIV或跨度等包围...（用户提交的内容来自wysiwyg）它只是一个h3标签。

这在css3中是否可行？如果不是，我愿意添加一些j来使它工作。

更新：

以下是预期结果的屏幕截图：

enter image description here

Answer 1

你可以这样试试：

标记

<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

产生的影响

enter image description here

Answer 2

喜欢这个？ demo

    h3:after {
    content:"";

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

}

Answer 3

试试这个：

<强> CSS

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

JSFIDDLE

Answer 4

不使用: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/

没有文本部分的CSS标题下划线

4 个答案: