見出しの真ん中に縦に線を入れたいのですが、右側に別のdivを追加したいです。見出しの真ん中に線を設定できますが、右側のスパンにスタイルを追加すると、線が真ん中になくなります。
編集: 問題は Firefox にあります。Chromeで問題なく動作します。
添付の画像をご覧ください:
これが私が試していることです:
HTML:
<div class="box">
<h2><span class="text">Hello world</span><span class="right"></span></h2>
</div>
CSS:
h2 {
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
padding:0 10px;
}
span.right{
background: green;
width: 30px;
height: 30px;
display: block;
float: right;
margin-top: -5px;
}