html - cssでテキストの横に行を入れてください

Question

このようにテキストの横に線を引きたい

- - - こんにちは世界 - - -

線を続けて太字にし、側面を中央に揃えて赤にする必要があります

Answer 1

:before および :after セレクターを試しましたか?

<span class="dashes">Hello WOrld</span>

<style type="text/css">
 .dashes { font-weight: bold; }
 .dashes:before, .dashes:after { content:"----"; color:#f00; }
</style>

これがどのように出てくるかです：画像サンプル

アップデート

あなたの更新とコメントに基づいて、これはあなたの説明に合っていると思います：

<h4 class="sidelines"><span>Hello WOrld</span></h4>
<style type="text/css">
h4.sidelines { text-align: center; border-bottom: 1px solid #f00; height: 0.5em; }
h4.sidelines span { display: inline-block; background: #fff; padding:0 0.25em; }
</style>

これにより、中央に太字のタイトルが表示され、両側に連続した行が表示されます。

更新の例を次に示します: http://o7.no/PVXvaH

Answer 2

CSS不要

─── Hello World ───

こんな感じ ──── ハローワールド ────

Answer 3

これを試して。ただし、すべてのブラウザ バージョンと互換性があるわけではありません。

 p:before,p:after  {
  content: "---";
 }

<p>Hello WOrld</p>

Answer 4

を使用してこれを達成しましdivた。このリンクをチェックして結果を確認してください。

HTML

<div class="line"></div>
<div class="text">Hello WOrld</div>
<div class="line"></div>

CSS

.line
{
  width:100px;background-color:black;
  border: 0.1em solid black; /* dashed, groove, inset */
  margin-top:0.45em;margin-bottom:0.45em;
}

.line, .text
{
  float:left;
}

.text
{
  padding-left:10px;padding-right:10px;
}

margin-top、margin-bottomおよびのスケール (高さ) を追加するとborder、1 に等しくなることに注意してください。私の例のよう0.45 + 0.45 + 0.1 = 1に。これにより、レイアウトがきれいに保たれます。

線をより太くしたい場合は、 と のスケールを念頭に置いてスケールを大きくしてborderください。margin-topmargin-bottom