未経験からエンジニア 奮闘記

未経験からエンジニアに自由に生きる途中

MENU

擬似要素

擬似要素の使い方

Hello worldの前と後ろに『』をつける 『Hello World』と一つのタグに入れる事もできるけど、記事要素を使うと分けられる

f:id:everydayProguramming:20200705142834p:plain


.text::before{
  content: '『';
  font-weight: 10px;
}


.text::after{
  content: '』';
  color: skyblue;
}

f:id:everydayProguramming:20200705143102p:plain

これにはpositionも使っているので1.の箇所を指定している

.wrapper{
  padding: 20px 30px;

  width: 100px;
  background-color: skyblue;
}
.text::before{
  content: '⒈';
  font-weight: 10px;
  position: absolute;
  top: 34px;
  left:10px;
}