划线文字

Question

鉴于以上动态生成的文本（意味着我不能只使用图像），我试图仅使用html和css选择器重新创建设计。

我想只使用包含文本的单个h4，但我对其他解决方案持开放态度。我宁愿不使用绝对定位，但同样，如果这是唯一的方法，那就这样吧。

我尝试使用span标记，但这些是没有固有宽度的内联元素。

h4将嵌套在div中，但并不总是具有相同的类或ID。

让我开始的任何想法或资源？

Answer 1

查看他们如何处理下面的文本在此表单上与我联系。非常干净简单。 http://www.onextrapixel.com/examples/html5-css3-contact-form/

以下是执行此操作的实际CSS：

h1 {
font-family: 'Questrial', Verdana, sans-serif;
text-align:center;
font-size:40px;
padding:0;
margin:0 0 20px 0;
position:relative;
color:#8C8C8C;
}

/** have a nice ampersand **/
h1:after {
font-size:25px;
color:#D6CFCB;
content: '&';
text-align:center;
display:block;
width:100%;
font-family: 'Alice', Verdana, serif;
text-shadow: 0px 1px 0px #fff;
}

/** create the gradient bottom **/
h1:before {
position:absolute;
bottom:15px;
content: ' ';
text-align:center;
display:block;
height:2px;
width:100%;
background: linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(182,180,180,0.7)     42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0)  57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* W3C */
}

很抱歉还有另一个编辑，但这是一个解释。 h1 {...}为实际文本设置样式，因此“事件计划”为你，而h1：在{...}之前执行酷线效果。 h1：在{...}之后做＆符号，所以这实际上就是你想把你的文字放在哪里

Answer 2

您可以使用span包装文本并将其放在容器div内。

<div id='container'>
    <span id='text'>EVENT SCHEDULE</span>
</div>​

然后给你的容器border-bottom并且高度低于你的文字（半尺寸应该给你你想要的效果）。

#container {border-bottom:solid 1px #333; text-align:center; height:10px;}
#text { background:#fff; padding:0 20px; }​

您可以在此处查看实时示例：http://jsfiddle.net/vzjxA/13/