【HTML・CSS】背景に横線を1本だけ入れる方法

※以前にはてなブログで書いた記事を再構成しています。
以前、サイト制作の際に「背景で横線を1本入れて、その上に要素をのせたい」と思ったのですが、検索してもなかなか出てこなかったので筆者なりの対処方法を書いておきます。

▲こんなようなものを作ります。

背景に使用するのはCSSでグラデーションを表現するlinear-gradientです。
数値をいじるとグラデーションだけではなく、実線も表示できます。
今回、線の上に円を置きましたが、モバイル対応させないとならないので、面倒な方はのせたい要素を1枚の画像にしてしまうのも手だと思います。

CSSの以下の箇所
background: linear-gradient(transparent 49%, #ffa22f 49%, #ffa22f 51%, transparent 51%);
の数値を変更すると線の位置が調整できます。
他の箇所も（数値や色など）、用途に合わせてカスタマイズしてみてください。