ＨＴＭＬ、ｃｓｓのatomつぅーやつで課題Ex1ってやつを表示させたいのですが、私は課題Ex1が

解決済

質問者：Wohinfahrensie
質問日時：2022/12/15 16:56
回答数：2件

ＨＴＭＬ、ｃｓｓのatomつぅーやつで

課題Ex1ってやつを表示させたいのですが、
私は課題Ex1が黄色く囲まれている状態から左に赤く染めたいのですが、どうすればよろしいですか？
左側を赤くしたいのです。やり方をおしえてください！お願いいたします。

<!DOCTYPE html>
<html lahg="ja">

<meta charset="utf-8">
<style>
.text{
position: relative;
font-size:2rem;
display: inline-block;
width:180px;
height:50px;
border:3px solid #da2;
padding-left: 60px;
}
.text::before{
content:"";
position: absolute;
top:-1px;
left:-1px;
with: 52px;height: 52px;
background: red;
}
</style>
<title>CSSセレクタ</title>
<body>
<div class="text">課題Ex1</div>
<div class="text">ここに新しいデータを入れます。ひとつ、ふたつと、少しずつ増やしてゆきます</div>
<div class="text">わこらないことは、わからないものをわかるまで分解することから始めます</div>ここに新しいデータを入れます。ひとつ、ふたつと、少しずつ増やしてゆきます
<div class="text">わこらないことは、わからないものをわかるまで分解することから始めます</div>
<div class="text">よく観察して下さい.対象も教科書も</div>
<div class="text">日頃の行いがとても大事です.</div>
<div class="text">予習は気持ちが前向きのときにはやるにせよ.
そうでない時も</div>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.2ベストアンサー

回答者： fujillin
回答日時：2022/12/15 18:05

こんばんは

なんだかよくわかりませんね。
オーバフローしているようですし、どのようなレイアウトにしたいのかもよくわかりません。

＞私は課題Ex1が黄色く囲まれている状態から左に赤く染めたいのですが、
＞どうすればよろしいですか？
＞左側を赤くしたいのです。やり方をおしえてください！お願いいたします。
文章だけを頼りにしてみると、こんなことなのでしょうか？
（当たるも八卦ですけれど・・）

<style>
.text{
position: relative;
font-size:2rem;
display: inline-block;
width:180px;
height:50px;
border:3px solid #da2;
padding-left: 60px;
}
/*
.text::before{
content:"";
position: absolute;
top:-1px;
left:-1px;
with: 52px;height: 52px;
background: red;
}
*/

.text:first-child::before {
content: "";
margin-left: -60px;
display: inline-block;
width:50px; height: 50px;
vertical-align: top;
background-color: red;
}
</style>