manjyusyage

ありがとうございます！
すみません、初めての質問で質問の仕方がわからない中、ご丁寧にありがとうございます！

h2 {
	background-color: #f5d5da; /* 背景色 */
	border-radius: 5px;
	color: #ef858c; /* 文字色 */
	padding: 10px 10px 10px 60px; /* 上・右・下・左の余白 */
	position: relative;
	text-shadow: 0px 0px 10px #fff, 0px 0px 6px #fff, 0px 0px 4px #fff, 0 0 0.5px #fff; /* 文字の影 */
}
h2:before {
	content: '＊*'; /*花に見せかけるためのアスタリスク*/
	color: #fff; /* アスタリスクの色 */
	display: inline-block;
	font-size: 30px; /* アスタリスクの大きさ */
	font-weight: bold;
	margin-right: 10px;
	position: absolute;
	top: 0px;
	left: 0px;
	transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	text-shadow: 0px 0px 3px #fff, 0px 0px 2px #fff, 0 0 0.5px #fff; /* アスタリスク周りの影 */
}
h2:after {
	border-bottom: 2px dotted #fff; /* 下線 */
	content: '';
	position: absolute;
	bottom: 3px;
	left: 3px;
	right: 3px;
}

https://0edition.net/archives/1448
こちらのサイトで公開されている、上記のタグをCSSに追加したところ、灰色になり、お花の位置も文字にかぶってしまい大変困っていました。

ご教示頂きましたCSSをコピペしたところ、いい感じに仕上がりました！
ありがとうございました！！

• この返信は4年、 10ヶ月前にmanjyusyageが編集しました。