0

下線を引き、下の境界線の「下」に矢印のグラフィックを付けたい H2 要素があります。

現在、矢印は上に表示され、背景座標を変更して矢印を下げると、矢印が消え始めます。

私のコード: 

h2 {
    background: url("images/arrow-title.png") no-repeat scroll 10px 27px transparent;
    line-height: 17px;
    padding-bottom: 15px;
    text-transform: uppercase;
    border-bottom: 2px solid #00a7a8;
}

現在行っていることのイメージ:

ここに画像の説明を入力

やりたいことのイメージ：

ここに画像の説明を入力

最後に、これを適切に行うテーマへの Web サイト リンクです。Firefox で「要素の検査」を表示しましたが、CSS を調整して機能させることができないようです。:(

正しく見えるテーマへの Web サイト リンク: http://www.joomlart.com/demo/#ja_travel

4

4 に答える 4

1

背景画像を使用したくない場合は、疑似要素を使用してみてください:

h2 {
line-height: 17px;
padding-bottom: 15px;
text-transform: uppercase;
border-bottom: 2px solid #00a7a8;
position: relative;
}
h2:before {
    content: '\25bc';
    position: absolute;
    top: 100%;
    left: 5em;
    color: #00a7a8;
}

フィドルのリファレンスを参照してください: http://jsfiddle.net/audetwebdesign/kFSvL/

主な利点は、マークアップの単純さです。

<h2>The Header Is Here</h2>

余分なタグは必要ありません!

于 2013-04-01T19:57:35.497 に答える
1

H2 内にスパンを追加します。そのスパンに境界線を適用し、H2 の padding-bottom を使用して矢印の位置を調整します。

于 2013-04-01T19:47:19.683 に答える
1

彼らがやっていることは<span />、タグの中に a を入れ<h2 />て、スパンに<h2 />

このように<h2 />、背景画像として矢印があり<span />、下部に 3px のパディングが追加されるため、完全に整列されます。

<h2>
  <span>
    This is my header
  </span>
</h2>

そして、このようなもの

h2{
  background: url("../images/arrow-title.png") no-repeat left center;
}
span{
  border-bottom: 2px solid black;
  padding-bottom: 3px;
}
于 2013-04-01T19:47:41.787 に答える
0

背景画像の下線部分を作ります。明らかに視覚的な観点からのものでなければならないので、技術的な観点からでもよいでしょう。

于 2013-04-01T19:44:51.457 に答える