こちらの文章で文字の一部だけ黒く塗りつぶしておきたいのですが、何か方法はありますでしょうか。
jqueryをつかった方法はありましたが、できればcssだけでやりたいと思っています。
<p>アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈(たいくつ)しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。</p>
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するテキストの任意の箇所を選択するセレクタは、 CSS に用意されていません。そのため、装飾を適用したい箇所へ適当な要素へ入れておく必要があります。
文字色が黒の場合、単純に background
プロパティと user-select
プロパティを指定することで実現出来ます。
.marker {
user-select: none;
background: #000;
}
<p>アリスは川辺でおねえさんの<span class="marker">よこ</span>にすわって、なんにもすることがないのでとても<span class="marker">退屈(たいくつ)</span>しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。</p>
もうひとつの方法として、擬似要素を利用する方法もあります。
.marker {
position: relative;
}
.marker::before {
position: absolute;
width: 100%;
height: 100%;
background: #000;
content: "";
}
<p>アリスは川辺でおねえさんの<span class="marker">よこ</span>にすわって、なんにもすることがないのでとても<span class="marker">退屈(たいくつ)</span>しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。</p>