Question

我正在尝试设置一个网站的一部分，其中一个模式会运行到某些文本的每一边。你看到我从PSD文件中截取的截图 - ＆gt; http://screencast.com/t/84RCLRdSZT红色箭头指向我发现难以解决的问题区域。

知道如何解决这个问题吗？

以下是我的开始：

<div class="box">
    <h2>Some text here</h2>
</div>

和css：

.box {
  width:400px;
  height:200px;
  text-align:center;
  background:yellow;
}

h2:after,h2:before{
  content:"";
  border:5px double purple;
}

这里是小提琴 - ＆gt; http://jsfiddle.net/HerrLoop/g63LB/1/

正如您所看到的，条纹是垂直的，而不是水平，正如您在我的初始截图中看到的那样。

Answer 1

这不是很完美，需要你在前/后元素上设置一个固定的宽度（如果需要响应，最好我能想到的是使用JavaScript），但这里有：

h2{
    display:inline-block;
    vertical-align:middle;
}
h2:after,
h2:before{
    content:"";
    margin:0px 20px;
    border:1px solid #000;
    border-left: 0px;
    border-right:0px;
    height:5px;
    width:50px;
    display:inline-block;
    vertical-align:middle;
}

http://jsfiddle.net/daCrosby/g63LB/2/

修改

这有点响应性更强，但仍然会在小尺寸上切断，并且在其他地方看起来不成比例：

.box { width:50%; overflow:hidden; } h2{ display:inline-block; vertical-align:middle; width:100%; white-space:nowrap; } h2:after, h2:before{ content:""; margin:0px 20px; border:1px solid #000; border-left: 0px; border-right:0px; height:5px; width:20%; display:inline-block; vertical-align:middle; }

http://jsfiddle.net/daCrosby/g63LB/3/

Answer 2

尝试此处描述的解决方案：http://kizu.ru/en/fun/legends-and-headings/

快速demo：

h2{
    overflow-x: hidden;
    white-space: nowrap;
    text-align: center;
}
h2:before, h2:after {
    content: "";
    border: solid #000;
    border-width: 1px 0;
    height: 5px;
    width: 50%;
    display: inline-block;
    vertical-align: middle;
}
h2:before { margin: 0 .5em 0 -50%; }
h2:after { margin: 0 -50% 0 .5em; }

用于文本之外的模式的CSS解决方案

2 个答案: