hrを使った横線に文字を追加したい

Question

HTMLのみを用いて、以下のような破線の中央に文字を追加することはできるのでしょうか？
また、このように間隔を開けて破線を引くには、CSSでコーディングするしかないのでしょうか。
本当に初歩的な質問で申し訳ありませんが、ご回答いただけると幸いです。

自分は上記の画像のようにコーディングしたいのですが、やったこととしては下記のようなコードをhtmlにてうち、下記の画像のようになってしまいます。
上記の画像になるようにしたいです。

<hr width="50px" align="left"      style="border: 1px dashed;">
<hr width="50px" align="left"      style="border: 1px dashed;">
<hr width="50px" align="left"      style="border: 1px dashed;">

Comments

[kei344]

「style="」に書かれているのはCSSですよ。

Answer 1

HTMLのみを用いて、以下のような破線の中央に文字を追加することはできるのでしょうか？

HTML は文書の構造を示すもので、一般的には CSS を用いて装飾を行います。 hr 要素は意味論的な用語により定義されているため、水平な点線を引きたいだけであれば、 CSS を使用することになります。

単一の要素と CSS を使うとすれば、以下のように linear-gradient 関数を用いることで、質問者さんの実現したいことを行えます (動作確認用リンク)。

<span class="omitted">中略</span>

.omitted {
  --w: 3px;
  display: grid;
  place-items: center;
  width: 200px;
  height: 150px;
  background: linear-gradient(to right, #fff 2em, transparent) center / 2em 1.5em no-repeat, linear-gradient(to right, transparent 6px, #fff 6px calc(6px + var(--w)), transparent 9px) 0% 0% / 10% 10% repeat, linear-gradient(to bottom, #000 var(--w), transparent var(--w)) 0% 0% / 100% calc((100% - var(--w) * 3) / 2 + var(--w)) repeat #fff;
}

Answer 2

HTMLだけでは実装不可能と思われます。
ソースが長くなってしまっていますが、以下のようにHTMLとCSSを記述すると実現できるようです。

追記:
https://codepen.io/new1ro/pen/BaoYBxx

<div class="hr">
  <span>中略</span>
</div>

.hr {
  margin-top: 40px;
  padding: 40px;
  text-align: center;
  
  border-top: 2px dashed #000;
  border-bottom: 2px dashed #000;
  position: relative;
}
.hr span {
  padding: 0 5px;
  background: #fff;
  position: relative;
  z-index: 1000;
}
.hr::before {
  content: "";
  border-top: 2px dashed #000;
  margin: auto 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

---

CSSだけで対応しようとすると、Firefoxでは実装できましたが
Chromeでは表示できませんでした..。

<!-- HTMLファイルに<style>...</style>を貼り付けるとCSSが使用できます。 -->
<style>
hr {
  height: 0px;
  margin: 7px 0;
  border: none;
  
  /* 追加 */
  border-top: 2px dashed #000;
  text-align: center;
}

/* 追加 */
hr::before {
  content: "中略";
  color: #000;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  display: inline-block;
  background: #fff;
  transform: translate(0, -6px);
}
</style>