09要素の位置を自由に配置せよ
emoji_objects
京都八瀬大原
2023年度春の特別拝観
-- 背景 --
***** {
position: relative;
padding-bottom: 56.25%;
background-image: url("**********.jpg");
background-size: contain;
}
-- 右上要素 --
***** {
position: absolute;
top: 0;
right: 7%;
padding: 2%;
width: 14%;
background: #fff;
}
-- 右上要素内のタイトル --
#question73 .chapter2-8-2 .tlt {
position: relative;
margin-bottom: 1.5em;
padding-bottom: 1.5em;
}
-- 右上要素内のタイトル画像(svgの場合) --
***** {
width: 100%;
}
-- 横線(疑似要素) --
*****::before {
content:"";
position: absolute;
bottom: 0;
left: 50%;
width: 10%;
height: 1px;
background: #000;
transform: translateX(-50%);
}
-- 横線の下のテキスト --
#question73 .chapter2-8-2 p {
text-align: center;
line-height: 1.4;
}
ヒント
-- css --
position: relative;
position: absolute;
box-shadow
::before
::after