HTMLのテキストの上に行を置く方法は？

Question

だから私はhtmlとcssでこれをやろうとしますが、何も見つけられないようです。私は考えることができる唯一の方法は、イメージとしてテキストをインポートすることですが、それは悪く見えるでしょう。 PSライトブルーのラインは、私が最初にPhotoshopのサイトを設計していますようセンタリングするためである

<p class="test"> 
Conact Me 
</p> 

.test { 
border-top-style: solid; 
border-bottom-style: solid; 
border-bottom-width: 1px; 
} 

Answer 1

あなたが欠けている外観を実現するために国境を使用してみてください：

は

a.my-class { 
    display: inline-block; 
    padding: 5px 15px; 
    border-top: 2px solid #000; 
    border-bottom: 2px solid #000; 
    line-height: 1em; 
    text-decoration: none; 
} 

Answer 2

あなたは、CSSのborder-topを使用することができますテキストの上に行を作成します。

.mytextbox { 
    border-top: 1px solid #ff0000; 
} 

border-top property

Example of use

Answer 3

簡単な解決策は、text-decoration: underline overline;を使用しています。

p { 
 
    text-decoration: overline underline; 
 
}

<p> 
 
CONTACT ME 
 
</p>

Answer 4

さて、あなたはdiv要素内のテキスト要素を持ちたいと思い、あなたが行っている色へのdivのBGの色のプロパティを設定し、その後のためのマージンを設定テキスト要素は〜10pxほどテキストをプッシュします（それはあなたのモックアップのどこにあるかのように見えます）。そこから、境界線を上、下、およびスタイルだけに応じて設定することができます。

Answer 5

ブロックレベル要素内にテキストを配置し、top and bottom borderを適用できます。 text-decoration: underline overline;に対するこの方法の利点は、必要に応じてテキストと行の間のスペースをpaddingで簡単に定義できることです。

幅がテキストの長さになるようにするには、display: inline-block;を使用してください。

body { 
 
    background: #5cc8f6; 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    padding: .5em; 
 
    border-top: 1px solid white; 
 
    border-bottom: 1px solid white; 
 
    color: white; 
 
    text-transform: uppercase; 
 
    font-family: Verdana; 
 
    font-size: 2em; 
 
}

<div>Contact me</div>